/* ============================================================
   SAR-APP.CSS — ra-operator-web single design file
   Load order: 1. lara-light-blue  2. primeflex.min.css  3. this
   ============================================================ */

/* ---- 1. BRAND TOKENS ---------------------------------------- */
:root {
  /* Lara theme variable overrides */
  --primary-color:        #0284c7;
  --primary-color-text:   #ffffff;
  --surface-ground:       #f1f5f9;
  --surface-card:         #ffffff;
  --surface-border:       #e2e8f0;
  --text-color:           #0f172a;
  --text-color-secondary: #64748b;
  --border-radius:        8px;
  --font-family:          'Univers LT Std', system-ui, -apple-system, Arial, sans-serif;
  /* Internal tokens */
  --sar-slate-900: #0f172a; --sar-slate-800: #1e293b;
  --sar-slate-700: #334155; --sar-slate-600: #475569;
  --sar-slate-500: #64748b; --sar-slate-400: #94a3b8;
  --sar-slate-300: #cbd5e1; --sar-slate-200: #e2e8f0;
  --sar-slate-100: #f1f5f9; --sar-slate-50:  #f8fafc;
  --sar-primary:        #0284c7;
  --sar-primary-dark:   #0369a1;
  --sar-primary-light:  #e0f2fe;
  --sar-success:        #10b981;
  --sar-success-light:  #d1fae5;
  --sar-warning:        #f59e0b;
  --sar-danger:         #ef4444;
  --sar-danger-light:   #fee2e2;
  --sar-bg:             #f1f5f9;
  --sar-card:           #ffffff;
  --sar-border:         #e2e8f0;
  --sar-text:           #0f172a;
  --sar-text-muted:     #64748b;
  --sar-radius:         8px;
  --sar-radius-lg:      12px;
  --sar-shadow:         0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --sar-shadow-lg:      0 4px 8px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.1);
  --sar-transition:     0.18s cubic-bezier(0.4,0,0.2,1);
  /* PrimeFaces 15 Lara tooltip token overrides */
  --p-tooltip-background:    #1e293b;
  --p-tooltip-color:         #f1f5f9;
  --p-tooltip-padding:       0.3rem 0.65rem;
  --p-tooltip-border-radius: 6px;
  --p-tooltip-shadow:        0 4px 14px rgba(0,0,0,0.28),0 1px 3px rgba(0,0,0,0.16);
}

/* ---- 2. BASE RESET ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--sar-bg); font-family:var(--font-family); color:var(--sar-text); font-size:14px; line-height:1.5; }
h1,h2,h3,h4,h5,h6 { margin:0; font-weight:700; color:var(--sar-slate-900); line-height:1.2; }
a { color:var(--sar-primary); text-decoration:none; } a:hover { text-decoration:underline; }
input,select,textarea,button { font-family:inherit; font-size:13px; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--sar-slate-100); }
::-webkit-scrollbar-thumb { background:var(--sar-slate-300); border-radius:9999px; }
::-webkit-scrollbar-thumb:hover { background:var(--sar-slate-400); }

/* ---- 3. LAYOUT SKELETON ------------------------------------- */
.sar-topbar {
  background:var(--sar-slate-800); color:white; position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,0.25); height:56px; display:flex; align-items:center;
}
.sar-topbar-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sar-topbar .subti_pagInternas { color:white; margin:0; font-size:13px; font-weight:500; opacity:0.85; }
.sar-header-user { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sar-header-user .font-bold { color:white; font-size:13px; }
.sar-header-user .text-sm  { color:rgba(255,255,255,0.65); font-size:11px; }
/* Exit/logout pill button — styled for dark topbar */
.sar-btn-exit.ui-button,
.sar-btn-exit.p-button { display:inline-flex!important; align-items:center!important; background:rgba(255,255,255,0.08)!important; border:1px solid rgba(255,255,255,0.22)!important; border-radius:20px!important; color:rgba(255,255,255,0.9)!important; padding:0.4rem 1rem!important; font-size:12px!important; font-weight:600!important; letter-spacing:0.02em!important; cursor:pointer!important; transition:background 0.18s,border-color 0.18s,color 0.18s!important; }
.sar-btn-exit.ui-button:hover,
.sar-btn-exit.p-button:hover { background:rgba(239,68,68,0.18)!important; border-color:rgba(239,68,68,0.55)!important; color:#fca5a5!important; }
.sar-btn-exit .ui-button-icon,
.sar-btn-exit .ui-button-icon-left,
.sar-btn-exit .p-button-icon { font-size:13px!important; margin-right:0.4rem!important; margin-left:0!important;
  position:relative!important; left:auto!important; top:auto!important; margin-top:0!important; }
.sar-btn-exit .ui-button-text,
.sar-btn-exit .ui-button-label,
.sar-btn-exit .p-button-label { padding:0!important; padding-left:0!important; line-height:1.2!important; }

/* Nav wrapper inside topbar — takes remaining space, centers nav horizontally */
.sar-topbar-nav { flex:1; display:flex; align-items:center; justify-content:center; min-width:0; }

/* Base menubar styles (used when rendered standalone — keep for fallback) */
.sar-menubar { background:var(--sar-card); border-bottom:1px solid var(--sar-border); }
.sar-menubar-nav.ui-menubar,
.sar-menubar-nav { border-radius:0!important; border:none!important; box-shadow:none!important; padding:0!important; min-height:unset!important; background:transparent!important; }
.sar-menubar-nav .ui-menuitem>.ui-menuitem-link,
.sar-menubar-nav .ui-menuitem-link { display:inline-flex; align-items:center; gap:0.35rem; border-radius:6px!important; padding:0.4rem 0.65rem!important; font-size:12px!important; font-weight:500!important; color:rgba(255,255,255,0.8)!important; border:none!important; background:transparent!important; transition:background-color var(--sar-transition),color var(--sar-transition); white-space:nowrap; }
.sar-menubar-nav .ui-menuitem>.ui-menuitem-link:hover,
.sar-menubar-nav .ui-menuitem.ui-state-hover>.ui-menuitem-link { background:rgba(255,255,255,0.14)!important; color:white!important; }
.sar-menubar-nav .ui-menuitem>.ui-menuitem-link:hover .ui-menuitem-icon,
.sar-menubar-nav .ui-menuitem.ui-state-hover .ui-menuitem-icon { color:white!important; }
.sar-menubar-nav .ui-menuitem-icon { color:rgba(255,255,255,0.55)!important; font-size:13px!important; margin-right:0!important; }
.sar-menubar-nav.ui-menubar .ui-menubar-root-list { display:flex!important; align-items:center!important; gap:0.1rem; padding:0!important; margin:0!important; list-style:none!important; border:none!important; background:transparent!important; }
.sar-menubar-nav.ui-menubar .ui-menubar-root-list>.ui-menuitem { float:none!important; display:inline-block!important; }

.sar-content { flex:1; padding:1.25rem 1rem; }
.sar-container { max-width:1100px; margin:0 auto; width:100%; animation:sar-fadein 0.22s ease; }
@keyframes sar-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.sar-footer { background:var(--sar-slate-800); border-top:none; }
.sar-footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; padding:0.65rem 1.5rem; }
.sar-footer-inner, .sar-footer-inner * { color:rgba(255,255,255,0.6)!important; font-size:11px; }

/* ---- 4. AJAX STATUS OVERLAY --------------------------------- */
.sar-ajax-status { position:fixed!important; top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important; width:auto!important; height:auto!important; pointer-events:none!important; z-index:99999!important; }
.sar-ajax-bar { background:white; border-radius:50%; padding:14px; box-shadow:0 8px 32px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; }

/* ---- 5. PRIMEFACES OVERRIDES -------------------------------- */

/* 5a. DataTable — dark headers (inside .sar-content-card) */
.sar-content-card .ui-datatable,
.ui-datatable { overflow:hidden; border:none!important; box-shadow:none!important; border-radius:0!important; }
.sar-content-card>.ui-outputpanel { overflow-x:auto!important; display:block!important; }
.sar-content-card .ui-datatable table,
.ui-datatable table { width:100%!important; min-width:820px; border-collapse:collapse!important; }
.sar-content-card .ui-datatable thead th,
.sar-content-card .ui-datatable th { background:linear-gradient(to bottom,#1e3a5f,#0f2a4a)!important; color:#e2eaf4!important; font-size:10px!important; font-weight:700!important; letter-spacing:0.07em!important; text-transform:uppercase!important; padding:0.6rem 0.85rem!important; border:none!important; border-bottom:2px solid var(--sar-primary)!important; white-space:nowrap; }
.sar-content-card .ui-datatable thead th:first-child { border-radius:8px 0 0 0!important; }
.sar-content-card .ui-datatable thead th:last-child  { border-radius:0 8px 0 0!important; border-right:none!important; }
.sar-content-card .ui-datatable th .ui-column-title,
.sar-content-card .ui-datatable th span { color:#e2eaf4!important; }
.sar-content-card .ui-datatable tbody tr { transition:background-color var(--sar-transition); }
.sar-content-card .ui-datatable tbody tr.even-row { background:var(--sar-slate-50)!important; }
.sar-content-card .ui-datatable tbody tr.odd-row  { background:#fff!important; }
.sar-content-card .ui-datatable tbody tr:hover,
.sar-content-card .ui-datatable tbody tr.ui-state-hover { background:var(--sar-primary-light)!important; }
.sar-content-card .ui-datatable tbody td { padding:0.55rem 0.85rem!important; font-size:13px!important; color:var(--sar-text)!important; border:none!important; border-bottom:1px solid var(--sar-border)!important; }

/* 5b. Paginator */
.ui-paginator { background:var(--sar-slate-50)!important; border:none!important; border-top:1px solid var(--sar-border)!important; padding:0.5rem 1rem!important; font-size:12px!important; display:flex!important; align-items:center!important; gap:0.25rem!important; flex-wrap:wrap; }
.ui-paginator .ui-paginator-first,.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,.ui-paginator .ui-paginator-last,
.ui-paginator .ui-paginator-page { display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:28px!important; height:28px!important; padding:0 6px!important; border-radius:var(--sar-radius)!important; border:1px solid var(--sar-border)!important; background:white!important; color:var(--sar-slate-700)!important; font-size:12px!important; cursor:pointer!important; transition:all var(--sar-transition); }
.ui-paginator .ui-paginator-page.ui-state-active { background:var(--sar-primary)!important; color:white!important; border-color:var(--sar-primary)!important; font-weight:700!important; }
.ui-paginator .ui-paginator-page:hover { background:var(--sar-primary-light)!important; border-color:var(--sar-primary)!important; color:var(--sar-primary)!important; }
.ui-paginator .ui-paginator-current { font-size:12px!important; color:var(--sar-text-muted)!important; padding:0 0.5rem!important; }
/* Replace missing jQuery UI sprite icons with PrimeIcons */
.ui-paginator .ui-icon { display:none!important; }
.ui-paginator .ui-paginator-first::before  { font-family:'primeicons'; content:'\e916'; font-size:12px; }
.ui-paginator .ui-paginator-prev::before   { font-family:'primeicons'; content:'\e931'; font-size:12px; }
.ui-paginator .ui-paginator-next::before   { font-family:'primeicons'; content:'\e932'; font-size:12px; }
.ui-paginator .ui-paginator-last::before   { font-family:'primeicons'; content:'\e917'; font-size:12px; }

/* 5c. Status button (btn_list) in table rows */
.btn_list.ui-button, .btn_list { background:var(--sar-primary)!important; border:none!important; border-radius:var(--sar-radius)!important; padding:0.25rem 0.6rem!important; font-size:10px!important; font-weight:700!important; color:white!important; white-space:normal!important; word-break:break-word; cursor:pointer!important; box-shadow:none!important; line-height:1.3!important; min-width:90px; max-width:160px; width:auto!important; text-align:center!important; display:inline-block!important; }
.btn_list.ui-button:hover, .btn_list:hover { background:var(--sar-primary-dark)!important; }
.btn_list.ui-state-disabled { background:var(--sar-slate-300)!important; color:var(--sar-slate-600)!important; cursor:default!important; }
.btn_list .ui-button-text { color:white!important; font-size:10px!important; font-weight:700!important; padding:0!important; white-space:normal!important; word-break:break-word; line-height:1.3!important; }
/* Action columns: shrink-wrap, no row-hover bleed */
.sar-col-action { white-space:nowrap!important; text-align:center!important; }
.sar-content-card .ui-datatable tbody tr:hover td.sar-col-action,
.sar-content-card .ui-datatable tbody tr.ui-state-hover td.sar-col-action { background:transparent!important; }
/* rowHover="true" makes Lara set cursor:pointer on the whole row — override to default so
   only the actual buttons show pointer, preventing "clicking the column" confusion */
.sar-content-card .ui-datatable-hoverable-rows tbody tr,
.sar-content-card .ui-datatable-hoverable-rows tbody tr td { cursor:default!important; }
.sar-content-card .ui-datatable tbody td.sar-col-action .ui-button { cursor:pointer!important; }
/* Suppress the blue cell highlight PrimeFaces adds to <td> when a button inside it is clicked */
.sar-content-card .ui-datatable tbody tr td:focus,
.sar-content-card .ui-datatable tbody tr td.ui-state-focus,
.sar-content-card .ui-datatable tbody tr td.ui-state-highlight { outline:none!important; box-shadow:none!important; border-color:transparent!important; }
/* Also suppress focus ring on the icon buttons themselves after click */
.sar-content-card .ui-datatable tbody td.sar-col-action .ui-button:focus,
.sar-content-card .ui-datatable tbody td.sar-col-action .ui-button.ui-state-focus { outline:none!important; box-shadow:none!important; }

/* 5d. p:dialog — elegant modal design */
.ui-widget-overlay { background:rgba(15,23,42,0.6)!important; z-index:1100!important; position:fixed!important; top:0!important; left:0!important; width:100%!important; height:100%!important; backdrop-filter:blur(2px)!important; }
/* Escalating specificity ladder — each selector adds one more class Lara puts on .ui-dialog.
   The 4-class form (0,4,0)+!important beats any Lara rule regardless of load order. */
.ui-dialog,
.ui-dialog.ui-widget-content,
.ui-dialog.ui-widget.ui-widget-content,
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all { background:#fff!important; border-radius:8px!important; box-shadow:0 4px 24px rgba(0,0,0,0.14),0 1px 6px rgba(0,0,0,0.07)!important; border:none!important; outline:none!important; overflow:hidden!important; z-index:1101!important; }
/* Titlebar: slim elegant header */
.ui-dialog .ui-dialog-titlebar { background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%)!important; color:white!important; padding:0.55rem 0.875rem 0.55rem 1.125rem!important; border:none!important; border-bottom:1px solid rgba(255,255,255,0.07)!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:0.75rem!important; }
.ui-dialog .ui-dialog-title { color:rgba(255,255,255,0.95)!important; font-size:13px!important; font-weight:600!important; letter-spacing:0.01em!important; text-transform:none!important; flex:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
/* Close button — circular, subtle */
.ui-dialog .ui-dialog-titlebar-close { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:26px!important; height:26px!important; min-width:26px!important; border-radius:50%!important; background:rgba(255,255,255,0.08)!important; border:1px solid rgba(255,255,255,0.14)!important; cursor:pointer!important; float:none!important; padding:0!important; margin:0!important; transition:background 0.15s,border-color 0.15s; flex-shrink:0!important; }
.ui-dialog .ui-dialog-titlebar-close:hover { background:rgba(255,255,255,0.2)!important; border-color:rgba(255,255,255,0.32)!important; }
/* Close button X icon — hide inner span, render via ::after on the <a> */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close span { display:none!important; }
.ui-dialog .ui-dialog-titlebar-close::after { content:'\e90b'!important; font-family:'primeicons'!important; font-size:12px!important; color:rgba(255,255,255,0.85)!important; }
/* Content & footer */
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-content.ui-widget-content { background:#fff!important; padding:1.5rem!important; overflow-y:auto; border:none!important; outline:none!important; }
.ui-dialog .ui-dialog-footer { background:#f8fafc!important; border-top:1px solid var(--sar-border)!important; padding:0.75rem 1rem!important; display:flex!important; gap:0.5rem!important; justify-content:flex-end!important; }
/* ---- Confirmation dialogs (.tam300): clean layout + button bar ---- */
/* Minimum width ensures long button labels fit side-by-side */
.ui-dialog.tam300 { min-width:420px!important; }
/* Remove legacy br spacers */
.ui-dialog.tam300 .ui-dialog-content > br { display:none!important; }
/* Flex container: warning text full-width row, buttons right-align on next row */
.ui-dialog.tam300 .ui-dialog-content { display:flex!important; flex-wrap:wrap!important; justify-content:flex-end!important; align-items:flex-start!important; gap:0.75rem!important; padding:1.25rem!important; }
/* Warning text — amber alert card with icon space */
.ui-dialog.tam300 .ui-dialog-content .WarningProviderText { width:100%!important; order:0!important; display:block!important; font-size:13.5px!important; color:var(--sar-slate-800)!important; line-height:1.55!important; padding:0.875rem 1rem 0.875rem 3.25rem!important; position:relative!important; background:#fffbeb!important; border:1px solid #fde68a!important; border-radius:var(--sar-radius)!important; box-sizing:border-box!important; }
/* Warning icon — pi-exclamation-triangle, anchored inside the amber box */
.ui-dialog.tam300 .ui-dialog-content .imgWarningProvider::before { content:'\e922'!important; font-family:'primeicons'!important; font-size:20px!important; color:#d97706!important; position:absolute!important; left:0.9rem!important; top:0.875rem!important; line-height:1!important; }
/* Expired/timeout icon — pi-exclamation-circle in red tint */
.ui-dialog.tam300 .ui-dialog-content .imgWarningExpired::before { content:'\e924'!important; font-family:'primeicons'!important; font-size:20px!important; color:#ef4444!important; position:absolute!important; left:0.9rem!important; top:0.875rem!important; line-height:1!important; }
.ui-dialog.tam300 .ui-dialog-content .imgWarningExpired.WarningProviderText { background:#fef2f2!important; border-color:#fca5a5!important; color:#991b1b!important; }
/* Buttons: un-float, right-aligned via justify-content:flex-end on parent */
.ui-dialog.tam300 .ui-dialog-content .ui-button { float:none!important; width:auto!important; min-width:90px!important; height:34px!important; font-size:13px!important; flex-shrink:0!important; order:10!important; }
.ui-dialog.tam300 .ui-dialog-content .direita,
.ui-dialog.tam300 .ui-dialog-content .esquerda { float:none!important; }

/* Session-timeout grace dialog: countdown ring above the warning text */
.ui-dialog.tam300 .ui-dialog-content .sar-grace-wrap { width:100%!important; order:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; gap:0.85rem!important; }
.sar-grace-ring {
  --sar-grace-pct: 100%;
  position:relative; width:80px; height:80px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(#ef4444 var(--sar-grace-pct), #e2e8f0 0);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.3s linear;
}
.sar-grace-ring::after { content:''; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.sar-grace-seconds { position:relative; z-index:1; font-family:'Courier New', monospace; font-size:22px; font-weight:800; color:#ef4444; }

/* 5e. Ghost panel — p:panel wrapping p:dialog for AJAX update */
#panelDialogTrailHistory.ui-panel,
#panelDialogTrailHistory { border:none!important; box-shadow:none!important; background:transparent!important; padding:0!important; margin:0!important; }
#panelDialogTrailHistory .ui-panel-titlebar { display:none!important; }
#panelDialogTrailHistory .ui-panel-content { padding:0!important; background:transparent!important; }

/* 5f. p:growl / p:toast — positioned below sticky header, always above the AJAX spinner overlay */
body .ui-growl { position:fixed!important; top:68px!important; right:1rem!important; z-index:100000!important; width:340px!important; will-change:transform; }
.p-toast { z-index:100000!important; will-change:transform; }
body .ui-growl .ui-growl-item-container { border-radius:var(--sar-radius-lg)!important; box-shadow:var(--sar-shadow-lg)!important; margin-bottom:0.5rem!important; overflow:hidden!important; animation:sar-fadein 0.22s ease; background:white!important; }
/* Severity left-border */
body .ui-growl .ui-growl-INFO    { border-left:4px solid #0284c7!important; }
body .ui-growl .ui-growl-WARN    { border-left:4px solid #d97706!important; }
body .ui-growl .ui-growl-ERROR,
body .ui-growl .ui-growl-FATAL   { border-left:4px solid #ef4444!important; }
body .ui-growl .ui-growl-SUCCESS { border-left:4px solid #10b981!important; }
/* Growl item layout — flex row: [icon][message], close button pinned top-right */
body .ui-growl .ui-growl-item { display:flex!important; align-items:flex-start!important; padding:0.75rem 2.25rem 0.75rem 0.85rem!important; gap:0.75rem!important; min-height:auto!important; position:relative!important; }
/* Status icon — circular badge with colored background */
body .ui-growl .ui-growl-INFO    .ui-growl-image,
body .ui-growl .ui-growl-WARN    .ui-growl-image,
body .ui-growl .ui-growl-ERROR   .ui-growl-image,
body .ui-growl .ui-growl-FATAL   .ui-growl-image,
body .ui-growl .ui-growl-SUCCESS .ui-growl-image {
  font-family:'primeicons'!important; display:inline-flex!important; align-items:center!important;
  justify-content:center!important; width:34px!important; height:34px!important;
  border-radius:50%!important; flex-shrink:0!important; font-size:0!important;
  order:0!important; background-image:none!important;
}
/* Hide any child elements that render the legacy sprite */
body .ui-growl .ui-growl-image > * { display:none!important; }
body .ui-growl .ui-growl-INFO    .ui-growl-image { background:#dbeafe!important; }
body .ui-growl .ui-growl-WARN    .ui-growl-image { background:#fef3c7!important; }
body .ui-growl .ui-growl-ERROR   .ui-growl-image,
body .ui-growl .ui-growl-FATAL   .ui-growl-image { background:#fee2e2!important; }
body .ui-growl .ui-growl-SUCCESS .ui-growl-image { background:#d1fae5!important; }
body .ui-growl .ui-growl-INFO    .ui-growl-image:before { content:'\e924'!important; font-family:'primeicons'!important; font-size:18px!important; color:#0284c7!important; }
body .ui-growl .ui-growl-WARN    .ui-growl-image:before { content:'\e922'!important; font-family:'primeicons'!important; font-size:18px!important; color:#d97706!important; }
body .ui-growl .ui-growl-ERROR   .ui-growl-image:before { content:'\e90c'!important; font-family:'primeicons'!important; font-size:18px!important; color:#ef4444!important; }
body .ui-growl .ui-growl-FATAL   .ui-growl-image:before { content:'\e90c'!important; font-family:'primeicons'!important; font-size:18px!important; color:#ef4444!important; }
body .ui-growl .ui-growl-SUCCESS .ui-growl-image:before { content:'\e90a'!important; font-family:'primeicons'!important; font-size:18px!important; color:#10b981!important; }
/* Message text */
body .ui-growl .ui-growl-message { flex:1!important; min-width:0!important; order:1!important; }
body .ui-growl .ui-growl-title { font-weight:700!important; font-size:13px!important; color:var(--sar-slate-900)!important; display:block!important; }
body .ui-growl .ui-growl-message p { font-size:12px!important; margin:2px 0 0!important; color:var(--sar-slate-700)!important; }
/* Close button — pinned at top-right; block + line-height centering (most reliable) */
body .ui-growl .ui-growl-icon-close {
  position:absolute!important; top:0.4rem!important; right:0.4rem!important;
  display:block!important; width:22px!important; height:22px!important;
  border-radius:50%!important; border:1px solid rgba(148,163,184,0.4)!important;
  background:rgba(241,245,249,0.9)!important; cursor:pointer!important;
  text-align:center!important; line-height:20px!important;
  font-size:0!important; transition:all 0.15s!important;
}
body .ui-growl .ui-growl-icon-close::after {
  content:'\e90b'!important; font-family:'primeicons'!important;
  font-size:10px!important; color:#64748b!important;
  display:inline!important; font-style:normal!important;
}
body .ui-growl .ui-growl-icon-close:hover {
  background:rgba(226,232,240,1)!important; border-color:rgba(100,116,139,0.4)!important;
}
body .ui-growl .ui-growl-icon-close .ui-icon { display:none!important; }

/* 5g. p:tooltip — modern dark tooltip (covers PF15 .p-tooltip and legacy .ui-tooltip) */
.ui-tooltip, .p-tooltip { pointer-events:none; }
.ui-tooltip-text,
.p-tooltip .p-tooltip-text {
  background:#1e293b!important;
  color:#f1f5f9!important;
  border:none!important;
  border-radius:6px!important;
  padding:0.3rem 0.65rem!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.45!important;
  letter-spacing:0.01em!important;
  box-shadow:0 4px 14px rgba(0,0,0,0.28),0 1px 3px rgba(0,0,0,0.16)!important;
  max-width:260px!important;
  white-space:normal!important;
  word-break:break-word!important;
  animation:sar-fadein 0.12s ease!important;
}
/* Arrow color — PF15 uses border trick for the pointer */
.ui-tooltip-right  .ui-tooltip-arrow,
.p-tooltip-right   .p-tooltip-arrow  { border-right-color:#1e293b!important; }
.ui-tooltip-left   .ui-tooltip-arrow,
.p-tooltip-left    .p-tooltip-arrow  { border-left-color:#1e293b!important; }
.ui-tooltip-top    .ui-tooltip-arrow,
.p-tooltip-top     .p-tooltip-arrow  { border-top-color:#1e293b!important; }
.ui-tooltip-bottom .ui-tooltip-arrow,
.p-tooltip-bottom  .p-tooltip-arrow  { border-bottom-color:#1e293b!important; }

/* 5h. p:blockUI */
.ui-blockui-content { background:rgba(255,255,255,0.9); border-radius:var(--sar-radius-lg); padding:1.5rem; display:flex; flex-direction:column; align-items:center; gap:0.75rem; }

/* 5h. p:breadCrumb */
.ui-breadcrumb { background:transparent!important; border:none!important; padding:0.4rem 0 0.75rem 0!important; }
.ui-breadcrumb .ui-menuitem-link { font-size:12px; color:var(--sar-text-muted)!important; }
.ui-breadcrumb li:last-child .ui-menuitem-text { color:var(--sar-primary); font-weight:600; }

/* 5i. p:tabView (global, non-search) */
.ui-tabview .ui-tabview-nav li.ui-state-active a { color:var(--sar-primary)!important; border-bottom:2px solid var(--sar-primary)!important; }
.ui-tabview .ui-tabview-nav li a { font-size:13px; font-weight:500; padding:0.6rem 1rem; }

/* ---- 6. SAR COMPONENT CLASSES ------------------------------- */

/* Native tab buttons — sliding underline style */
.sar-tab-nav { display:flex; gap:0; flex-wrap:wrap; margin-bottom:1rem; border-bottom:2px solid var(--sar-slate-200); }
.sar-tab-btn { position:relative; display:inline-flex; align-items:center; padding:0.5rem 1.25rem; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; border:none; border-radius:0; background:transparent; color:var(--sar-slate-500); cursor:pointer; font-family:inherit; white-space:nowrap; line-height:1; transition:color 0.2s ease; }
.sar-tab-btn::after { content:''; position:absolute; bottom:-2px; left:50%; right:50%; height:2px; background:var(--sar-primary); transition:left 0.25s cubic-bezier(0.4,0,0.2,1), right 0.25s cubic-bezier(0.4,0,0.2,1); }
.sar-tab-btn:hover { color:var(--sar-primary); background:transparent; }
.sar-tab-btn:hover::after { left:0; right:0; }
.sar-tab-btn.sar-tab-active { color:var(--sar-primary); background:transparent; font-weight:700; }
.sar-tab-btn.sar-tab-active::after { left:0; right:0; }

/* Page header card (listworkgroup) */
.sar-page-header { background:white; border-radius:var(--sar-radius-lg); box-shadow:var(--sar-shadow); border:1px solid var(--sar-border); padding:0.875rem 1.25rem 0; display:flex; flex-direction:column; gap:0; }
.sar-header-top { display:flex; flex-direction:row; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; padding-bottom:0.75rem; }
.sar-header-divider { height:1px; background:var(--sar-border); margin:0 -1.25rem; width:calc(100% + 2.5rem); }
.sar-page-title { font-size:15px; font-weight:700; color:var(--sar-slate-900); margin:0; white-space:nowrap; }

/* Panels */
.sar-info-inline.ui-panel { border:none!important; box-shadow:none!important; background:transparent!important; width:100%; }
.sar-info-inline .ui-panel-titlebar { display:none!important; }
.sar-info-inline .ui-panel-content { padding:0.65rem 0 0.75rem!important; background:transparent!important; }
.sar-transparent-panel.ui-panel { border:none!important; box-shadow:none!important; background:transparent!important; border-radius:0!important; }
.sar-transparent-panel .ui-panel-titlebar { display:none!important; }
.sar-transparent-panel .ui-panel-content { padding:0!important; background:transparent!important; }

/* Content card (listworkgroup main card) */
.sar-content-card { background:white; border-radius:var(--sar-radius-lg); box-shadow:var(--sar-shadow); border:1px solid var(--sar-border); overflow:hidden; }
.sar-card-header { background:var(--sar-slate-800); color:white; padding:0.7rem 1.25rem; display:flex; align-items:center; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.sar-card-header i { font-size:14px; opacity:0.85; }
.sar-search-area { background:var(--sar-slate-50); border-bottom:1px solid var(--sar-border); padding:1.1rem 1.25rem 1rem; }

/* Filter components */
.sar-filter-label { font-size:11px; font-weight:600; color:var(--sar-slate-500); text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; display:block; margin-bottom:2px; }
.sar-filter-select { font-size:13px; border:1px solid var(--sar-border)!important; border-radius:var(--sar-radius)!important; padding:0.3rem 0.5rem; color:var(--sar-text); background:white; min-width:120px; max-width:180px; width:180px; height:30px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.sar-filter-input  { font-size:13px; border:1px solid var(--sar-border)!important; border-radius:var(--sar-radius)!important; padding:0.3rem 0.5rem; color:var(--sar-text); background:white; width:200px; height:30px; }

/* Info bar values (agent panel) */
.sar-info-value { font-size:13px!important; font-weight:500!important; color:var(--sar-slate-800)!important; background:var(--sar-slate-50)!important; border:1px solid var(--sar-border)!important; border-radius:var(--sar-radius)!important; padding:0.3rem 0.6rem!important; min-width:180px; height:30px!important; }
.sar-info-label  { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--sar-slate-500); white-space:nowrap; display:block; margin-bottom:2px; }


/* p:datePicker — components.css (loaded after this file) sets .ui-icon{text-indent:-99999px;overflow:hidden}
   which hides ::before glyph content. Must explicitly reset those here. */
.ui-trigger-calendar { display:inline-flex!important; vertical-align:middle!important; }
.ui-trigger-calendar .ui-inputfield { color:#495057!important; background:#fff!important; border:1px solid var(--sar-border)!important; border-right:none!important; border-radius:var(--sar-radius) 0 0 var(--sar-radius)!important; padding:0.3rem 0.5rem!important; width:108px!important; height:30px!important; font-size:13px!important; box-shadow:none!important; outline:none!important; -webkit-appearance:none!important; appearance:none!important; }
.ui-trigger-calendar .ui-datepicker-trigger { background:#fff!important; color:var(--sar-slate-500)!important; border:1px solid var(--sar-border)!important; border-left:none!important; border-radius:0 var(--sar-radius) var(--sar-radius) 0!important; padding:0!important; height:30px!important; width:28px!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; -webkit-appearance:none!important; appearance:none!important; overflow:visible!important; }
.ui-trigger-calendar .ui-datepicker-trigger:hover { background:var(--sar-primary-light)!important; border-color:var(--sar-primary)!important; }
.ui-trigger-calendar .ui-datepicker-trigger .ui-icon { position:static!important; margin:0!important; text-indent:0!important; overflow:visible!important; display:inline-block!important; width:auto!important; height:auto!important; background:none!important; }
.ui-trigger-calendar .ui-datepicker-trigger .ui-icon-calendar { font-family:'primeicons'!important; font-style:normal!important; font-weight:normal!important; display:inline-block!important; background:none!important; text-indent:0!important; overflow:visible!important; color:var(--sar-slate-500)!important; font-size:13px!important; line-height:1!important; -webkit-font-smoothing:antialiased!important; -moz-osx-font-smoothing:grayscale!important; }
.ui-trigger-calendar .ui-datepicker-trigger .ui-icon-calendar:before { content:"\e927"!important; text-indent:0!important; }
.ui-trigger-calendar .ui-datepicker-trigger:hover .ui-icon-calendar { color:var(--sar-primary)!important; }

/* p:datePicker popup panel — background and nav icons (components.css loads after this file and
   provides no background/border, and kills icon spans with text-indent:-99999px) */
.ui-datepicker { background:#fff!important; border:1px solid var(--sar-border)!important; border-radius:var(--sar-radius)!important; box-shadow:0 4px 16px rgba(0,0,0,.12)!important; padding:.5rem!important; }
.ui-datepicker .ui-datepicker-header { background:#fff!important; border:none!important; border-bottom:1px solid var(--sar-border)!important; padding:.5rem 1rem!important; font-weight:600!important; color:var(--sar-text)!important; border-radius:0!important; margin:0!important; position:relative!important; line-height:normal!important; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { position:absolute!important; top:50%!important; margin-top:-.9rem!important; width:2rem!important; height:2rem!important; background:transparent!important; border:none!important; border-radius:50%!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-family:'primeicons'!important; font-style:normal!important; font-weight:normal!important; color:var(--sar-slate-500)!important; font-size:14px!important; text-indent:0!important; overflow:visible!important; cursor:pointer!important; -webkit-font-smoothing:antialiased!important; }
.ui-datepicker .ui-datepicker-prev { left:0!important; }
.ui-datepicker .ui-datepicker-next { right:0!important; }
.ui-datepicker .ui-datepicker-prev:before { content:"\e900"!important; }
.ui-datepicker .ui-datepicker-next:before { content:"\e901"!important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display:none!important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background:var(--sar-primary-light)!important; color:var(--sar-primary)!important; }
.ui-datepicker .ui-datepicker-title { line-height:1!important; margin:0!important; text-align:center!important; }
.ui-datepicker .ui-datepicker-calendar td > a, .ui-datepicker .ui-datepicker-calendar td > span { color:var(--sar-text)!important; border-radius:50%!important; transition:background .15s!important; }
.ui-datepicker .ui-datepicker-calendar td > a:hover { background:var(--sar-primary-light)!important; }
.ui-datepicker .ui-datepicker-calendar td > a.ui-state-active { background:var(--sar-primary)!important; color:#fff!important; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today > a { color:var(--sar-primary)!important; font-weight:700!important; }

/* ── Upload dialog & fileupload component ──────────────────────────────────
   components.css (loaded after this file) sets .ui-icon{text-indent:-99999px}
   which kills ::before PrimeIcon glyphs. Reset exactly as done for datepicker. */

/* 1. Icon reset — scoped to fileupload (covers both .ui-icon sprite class and .ui-button-icon) */
.ui-fileupload .ui-icon,
.ui-fileupload .ui-button-icon { text-indent:0!important; overflow:visible!important; display:inline-block!important; width:auto!important; height:auto!important; background-image:none!important; }
/* Per-file row uses jQuery UI sprite class ui-icon-close for the remove button.
   Sprite is disabled above; render × via primeicons ::before instead. */
.ui-fileupload .ui-icon-close { font-family:'primeicons'!important; font-style:normal!important; font-weight:normal!important; -webkit-font-smoothing:antialiased!important; -moz-osx-font-smoothing:grayscale!important; }
.ui-fileupload .ui-icon-close::before { content:'\e90b'!important; text-indent:0!important; display:inline-block!important; }

/* 2. Outer container — strip jQuery UI chrome */
.fileuploadSkin .ui-fileupload { border:none!important; background:transparent!important; font-family:inherit!important; }

/* 3. Button bar */
.fileuploadSkin .ui-fileupload-buttonbar { background:transparent!important; border:none!important; border-bottom:1px solid var(--sar-border)!important; padding:0 0 0.875rem 0!important; display:flex!important; align-items:center!important; gap:0.5rem!important; }

/* 4. Choose button — primary */
.fileuploadSkin .ui-fileupload-choose.ui-button { background:var(--sar-primary)!important; border:none!important; color:#fff!important; border-radius:var(--sar-radius)!important; padding:0.45rem 1rem!important; font-size:13px!important; font-weight:600!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; gap:0.4rem!important; transition:background var(--sar-transition)!important; box-shadow:none!important; }
.fileuploadSkin .ui-fileupload-choose.ui-button:hover { background:var(--sar-primary-dark)!important; }
.fileuploadSkin .ui-fileupload-choose .ui-button-icon { font-size:13px!important; }
.fileuploadSkin .ui-fileupload-choose .ui-button-text { font-size:13px!important; }

/* 5. Cancel/Clear button — ghost */
.fileuploadSkin .ui-fileupload-buttonbar > .ui-fileupload-cancel.ui-button { background:transparent!important; border:1px solid var(--sar-border)!important; color:var(--sar-text-muted)!important; border-radius:var(--sar-radius)!important; padding:0.45rem 1rem!important; font-size:13px!important; font-weight:600!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; gap:0.4rem!important; transition:all var(--sar-transition)!important; box-shadow:none!important; }
.fileuploadSkin .ui-fileupload-buttonbar > .ui-fileupload-cancel.ui-button:hover { background:var(--sar-danger-light)!important; border-color:var(--sar-danger)!important; color:var(--sar-danger)!important; }

/* 6. Content area — drag-and-drop zone */
.fileuploadSkin .ui-fileupload-content { background:var(--sar-slate-50)!important; border:2px dashed var(--sar-border)!important; border-radius:var(--sar-radius)!important; margin-top:1rem!important; padding:1.25rem!important; min-height:110px!important; transition:border-color var(--sar-transition), background var(--sar-transition)!important; }
.fileuploadSkin .ui-fileupload-content.ui-fileupload-highlight { border-color:var(--sar-primary)!important; background:var(--sar-primary-light)!important; }
.fileuploadSkin .ui-fileupload-files:empty::before { content:"Arraste arquivos aqui ou use o bot\00e3o acima"; display:block; text-align:center; padding:1.5rem 0; color:var(--sar-text-muted); font-size:13px; }

/* 7. Progress bar — slim strip */
.fileuploadSkin .ui-progressbar { height:3px!important; background:var(--sar-slate-200)!important; border-radius:2px!important; border:none!important; margin-bottom:0.75rem!important; overflow:hidden!important; }
.fileuploadSkin .ui-progressbar-value { background:var(--sar-primary)!important; height:100%!important; border-radius:2px!important; transition:width 0.3s ease!important; }

/* 8. File rows — fileupload.css uses a CSS-table layout (display:table/table-row/table-cell).
   position:relative on display:table-row is ignored by browsers, so break the table first. */
.fileuploadSkin .ui-fileupload-files { display:block!important; margin:0!important; }
.fileuploadSkin .ui-fileupload-files > div { display:block!important; }
.fileuploadSkin .ui-fileupload-row { display:flex!important; align-items:center!important; gap:0.75rem!important; padding:0.5rem 0.75rem!important; background:#fff!important; border:1px solid var(--sar-border)!important; border-radius:var(--sar-radius)!important; margin-bottom:0.5rem!important; transition:border-color var(--sar-transition), box-shadow var(--sar-transition)!important; }
.fileuploadSkin .ui-fileupload-row:last-child { margin-bottom:0!important; }
.fileuploadSkin .ui-fileupload-row:hover { border-color:var(--sar-primary)!important; box-shadow:0 0 0 3px rgba(2,132,199,0.07)!important; }
/* Thumbnail wrapper div (PF15 wraps img in an unstyled div) */
.fileuploadSkin .ui-fileupload-row > div:first-child { flex:0 0 40px!important; width:40px!important; height:40px!important; overflow:hidden!important; border-radius:4px!important; }
/* Img itself — robust selector covers both .ui-fileupload-preview and unlabelled imgs */
.fileuploadSkin .ui-fileupload-row img, .fileuploadSkin .ui-fileupload-preview { width:40px!important; height:40px!important; max-width:40px!important; max-height:40px!important; object-fit:cover!important; border-radius:4px!important; display:block!important; flex-shrink:0!important; }
.fileuploadSkin .ui-fileupload-filename { flex:1!important; font-size:13px!important; color:var(--sar-text)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; }
/* File size — 3rd direct child */
.fileuploadSkin .ui-fileupload-row > div:nth-child(3) { font-size:11px!important; color:var(--sar-text-muted)!important; white-space:nowrap!important; flex-shrink:0!important; }
/* Per-file progress bar (4th child, inside .ui-fileupload-progress) */
.fileuploadSkin .ui-fileupload-progress { flex:1!important; min-width:60px!important; }
.fileuploadSkin .ui-fileupload-progress .ui-progressbar { margin-bottom:0!important; width:100%!important; }
/* Row cancel/remove button — components.css forces position:absolute; anchor it inside the
   row by making the row the positioned container, then pin to vertical center of right edge. */
.fileuploadSkin .ui-fileupload-row { position:relative!important; padding-right:36px!important; }
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel.ui-button,
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel.ui-button.ui-state-default,
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel.ui-button.ui-state-hover,
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel.ui-button.ui-state-focus {
    position:absolute!important; right:7px!important; top:50%!important; transform:translateY(-50%)!important;
    background:transparent!important; background-color:transparent!important; background-image:none!important;
    border:1px solid var(--sar-slate-200)!important; color:var(--sar-slate-400)!important;
    padding:0!important; width:22px!important; height:22px!important; border-radius:50%!important;
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    box-shadow:none!important; transition:all var(--sar-transition)!important;
}
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel.ui-button:hover { background:var(--sar-danger-light)!important; background-color:var(--sar-danger-light)!important; border-color:var(--sar-danger)!important; color:var(--sar-danger)!important; }
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel .ui-button-icon,
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel .ui-icon { font-size:11px!important; line-height:1!important; }
.fileuploadSkin .ui-fileupload-row .ui-fileupload-cancel .ui-button-text { display:none!important; }

/* 9. Crop modal — strip p:panel chrome + status messages */
#msgCropUpload.ui-panel { background:transparent!important; border:none!important; box-shadow:none!important; }
#msgCropUpload .ui-panel-content-wrapper, #msgCropUpload .ui-panel-content { background:transparent!important; border:none!important; padding:0 0 0.75rem 0!important; }
.alertaUpload { display:inline-flex!important; align-items:center!important; gap:0.5rem!important; background:#fffbeb!important; border:1px solid #fde68a!important; border-left:4px solid var(--sar-warning)!important; border-radius:var(--sar-radius)!important; color:#92400e!important; font-size:13px!important; padding:0.65rem 1rem!important; margin:0!important; width:100%!important; box-sizing:border-box!important; }
.alertaUpload::before { font-family:'primeicons'; content:'\e922'; color:var(--sar-warning); flex-shrink:0; }
.sucessUpload { display:inline-flex!important; align-items:center!important; gap:0.5rem!important; background:var(--sar-success-light)!important; border:1px solid #6ee7b7!important; border-left:4px solid var(--sar-success)!important; border-radius:var(--sar-radius)!important; color:#065f46!important; font-size:13px!important; padding:0.65rem 1rem!important; margin:0!important; width:100%!important; box-sizing:border-box!important; }
.sucessUpload::before { font-family:'primeicons'; content:'\e90a'; color:var(--sar-success); flex-shrink:0; }
.warningUpload { display:inline-flex!important; align-items:center!important; gap:0.5rem!important; background:var(--sar-danger-light)!important; border:1px solid #fca5a5!important; border-left:4px solid var(--sar-danger)!important; border-radius:var(--sar-radius)!important; color:#7f1d1d!important; font-size:13px!important; padding:0.65rem 1rem!important; margin:0!important; width:100%!important; box-sizing:border-box!important; }
.warningUpload::before { font-family:'primeicons'; content:'\e90c'; color:var(--sar-danger); flex-shrink:0; }

/* ---- 7. DIMENSION UTILITIES --------------------------------- */
.tam80{width:80px!important}   .tam100{width:100px!important}  .tam110{width:110px!important}  .tam120{width:120px!important}
.tam130{width:130px!important}  .tam140{width:140px!important}  .tam150{width:150px!important}  .tam160{width:160px!important}
.tam170{width:170px!important}  .tam180{width:180px!important}  .tam190{width:190px!important}  .tam200{width:200px!important}
.tam210{width:210px!important}  .tam220{width:220px!important}  .tam230{width:230px!important}  .tam240{width:240px!important}
.tam250{width:250px!important}  .tam260{width:260px!important}  .tam270{width:270px!important}  .tam280{width:280px!important}
.tam290{width:290px!important}  .tam300{width:300px!important}  .tam310{width:310px!important}  .tam320{width:320px!important}
.tam330{width:330px!important}  .tam340{width:340px!important}  .tam350{width:350px!important}  .tam360{width:360px!important}
.tam370{width:370px!important}  .tam380{width:380px!important}  .tam390{width:390px!important}  .tam400{width:400px!important}
.tam420{width:420px!important}  .tam440{width:440px!important}  .tam450{width:450px!important}  .tam460{width:460px!important}
.tam470{width:470px!important}  .tam480{width:480px!important}  .tam490{width:490px!important}  .tam500{width:500px!important}
.tam520{width:520px!important}  .tam540{width:540px!important}  .tam550{width:550px!important}  .tam560{width:560px!important}
.tam570{width:570px!important}  .tam580{width:580px!important}  .tam590{width:590px!important}  .tam600{width:600px!important}
.tam620{width:620px!important}  .tam630{width:630px!important}  .tam640{width:640px!important}  .tam650{width:650px!important}
.tam660{width:660px!important}  .tam680{width:680px!important}  .tam700{width:700px!important}  .tam720{width:720px!important}
.tam740{width:740px!important}  .tam750{width:750px!important}  .tam760{width:760px!important}  .tam780{width:780px!important}
.tam800{width:800px!important}  .tam820{width:820px!important}  .tam850{width:850px!important}  .tam900{width:900px!important}
.tam935{width:935px!important}  .tam960{width:960px!important}  .tam100porCento{width:100%!important}

.alt10{height:10px!important}   .alt15{height:15px!important}   .alt20{height:20px!important}   .alt25{height:25px!important}
.alt30{height:30px!important}   .alt35{height:35px!important}   .alt40{height:40px!important}   .alt45{height:45px!important}
.alt50{height:50px!important}   .alt60{height:60px!important}   .alt70{height:70px!important}   .alt80{height:80px!important}
.alt90{height:90px!important}   .alt100{height:100px!important}  .alt110{height:110px!important}  .alt120{height:120px!important}
.alt130{height:130px!important}  .alt140{height:140px!important}  .alt150{height:150px!important}  .alt160{height:160px!important}
.alt165{height:165px!important}  .alt170{height:170px!important}  .alt180{height:180px!important}  .alt190{height:190px!important}
.alt200{height:200px!important}  .alt300{height:300px!important}  .alt400{height:400px!important}
.alt500{height:500px!important}  .alt100porCento{height:100%!important}

.margin5T{margin-top:5px!important}   .margin8T{margin-top:8px!important}    .margin10T{margin-top:10px!important}
.margin15T{margin-top:15px!important}  .margin20T{margin-top:20px!important}  .margin25T{margin-top:25px!important}
.margin30T{margin-top:30px!important}  .margin33T{margin-top:33px!important}  .margin40T{margin-top:40px!important}
.margin50T{margin-top:50px!important}  .margin75T{margin-top:75px!important}  .margin100T{margin-top:100px!important}
.margin5L{margin-left:5px!important}   .margin8L{margin-left:8px!important}   .margin10L{margin-left:10px!important}
.margin13L{margin-left:13px!important}  .margin15L{margin-left:15px!important}  .margin20L{margin-left:20px!important}
.margin25L{margin-left:25px!important}  .margin30L{margin-left:30px!important}  .margin35L{margin-left:35px!important}
.margin40L{margin-left:40px!important}  .margin43L{margin-left:43px!important}  .margin45L{margin-left:45px!important}
.margin50L{margin-left:50px!important}  .margin75L{margin-left:75px!important}  .margin100L{margin-left:100px!important}  .margin120L{margin-left:120px!important}
.margin5R{margin-right:5px!important}   .margin10R{margin-right:10px!important}  .margin15R{margin-right:15px!important}
.margin20R{margin-right:20px!important}  .margin30R{margin-right:30px!important}  .margin35R{margin-right:35px!important}
.margin40R{margin-right:40px!important}  .margin50R{margin-right:50px!important}  .margin75R{margin-right:75px!important}
.margin100R{margin-right:100px!important} .margin120R{margin-right:120px!important}
.margin5B{margin-bottom:5px!important}   .margin8B{margin-bottom:8px!important}   .margin10B{margin-bottom:10px!important}
.margin15B{margin-bottom:15px!important}  .margin20B{margin-bottom:20px!important}  .margin30B{margin-bottom:30px!important}
/* Aliases used in legacy JSF */ .margin-00L,.margin00L{margin-left:0!important} .margin03L{margin-left:3px!important} .margin05L{margin-left:5px!important} .margin08L{margin-left:8px!important} .margin08T{margin-top:8px!important} .margin08B{margin-bottom:8px!important}

/* ---- 8. LAYOUT HELPERS -------------------------------------- */
.esquerda{float:left!important}  .direita{float:right!important}
.aligCenter{text-align:center!important}  .aligLeft{text-align:left!important}  .aligRight{text-align:right!important}
.centro{margin-left:auto!important;margin-right:auto!important}
.clear{clear:both!important;display:block!important}
.clearfix::after{content:'';display:table;clear:both}
.displayBlock{display:block!important}  .displayNone{display:none!important}  .displayInline{display:inline!important}
.center{text-align:center!important}  .hidden{display:none!important}  .invisible{visibility:hidden!important}
.overflow-hide{overflow:hidden!important}  .pointer{cursor:pointer!important}  .bold{font-weight:700!important}  .italic{font-style:italic!important}
/* Spacers MUST clear floats */
.espacamento    { clear:both; display:block; overflow:hidden; }
.espacamento05  { clear:both; height:5px;  display:block; }
.espacamento10  { clear:both; height:10px; display:block; }
.espacamento15  { clear:both; height:15px; display:block; }
.espacamento20  { clear:both; height:20px; display:block; }

/* ---- 9. PAGE STRUCTURE ------------------------------------- */
.colCentral { width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.contentMasterValidacao { box-sizing:border-box; width:100%; }
.colInternasform {
  width:100%; box-sizing:border-box;
  background:white!important; border-radius:12px!important; border:1px solid #e2e8f0!important;
  box-shadow:var(--sar-shadow)!important; padding:1.25rem!important; display:flow-root;
}
.colInternasformOperator {
  width:100%; box-sizing:border-box;
  background:white!important; border-radius:12px!important; border:1px solid #e2e8f0!important;
  box-shadow:var(--sar-shadow)!important; padding:1.25rem!important; display:flow-root;
}
.colInternasform .ui-outputpanel { display:block!important; }
#requestAdd { width:100%; box-sizing:border-box; }

/* Breadcrumb */
ul.breadCrumb { list-style:none; margin:0 0 0.75rem 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0; font-size:12px; }
ul.breadCrumb li { display:inline-flex; align-items:center; color:#64748b; }
ul.breadCrumb li::after { content:'/'; margin:0 6px; color:#cbd5e1; }
ul.breadCrumb li:last-child::after { display:none; }
ul.breadCrumb li a { color:#0284c7; }
ul.breadCrumb li:last-child { color:#0f172a; font-weight:600; }
.colorR { color:#94a3b8; }  .colorC { color:#0f172a; font-weight:600; }

/* Page header layout */
.headerContainerValidacao { display:flex; flex-direction:column; align-items:stretch; gap:1.25rem; }
.ti_pagInternas  { font-size:16px; font-weight:700; color:#0f172a; margin:0; line-height:1.2; }
.subti_pagInternas { font-size:13px; font-weight:600; color:#475569; margin:0; line-height:1.3; }
/* Clock badge — absolutely anchored top-right of the .fundoTitulo100 card */
.boxClock {
  position: absolute !important; top: 1rem; right: 1.25rem;
  display: inline-flex !important; align-items: center !important; gap: 0.4rem !important;
  background: white; border: 1.5px solid #e2e8f0; border-radius: 20px;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer; user-select: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.boxClock:hover { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,0.1); }
.sar-clock-ico { font-size: 12px !important; color: #64748b !important; flex-shrink: 0; }
.sar-clock-time {
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  color: #0284c7; letter-spacing: 0.05em; min-width: 6ch; text-align: center;
}
.sar-clock-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: #94a3b8;
  border-left: 1px solid #e2e8f0; padding-left: 0.45rem; margin-left: 0.05rem;
}

/* Float-based two-column layout (base; Phase 3 overrides below) */
.boxInputsEsquerda { float:left; display:block; vertical-align:top; box-sizing:border-box; margin-bottom:0.5rem; }
.boxInputsEsquerda::after { content:''; display:table; clear:both; }
.boxInputsDireita   { float:right; display:block; vertical-align:top; box-sizing:border-box; margin-bottom:0.5rem; }

/* Form elements */
.lab_add { font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:3px; }
.lab_addDireita { font-size:11px; font-weight:600; color:#475569; display:block; margin-bottom:3px; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; }
.lab_addDireita.margin43L, .lab_addDireita.margin45L { display:block; }
.inp_add { height:28px; padding:3px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; font-family:inherit; color:#0f172a; background:#fff; box-sizing:border-box; display:block; outline:none; }
.inp_add:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,0.1); }
.inp_addDireita { height:28px; padding:3px 8px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; font-family:inherit; color:#0f172a; background:#fff; box-sizing:border-box; display:block; outline:none; }
.inp_addDireita:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,0.1); }
.simulaInput { display:block; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:4px 10px; font-size:13px; color:#0f172a; box-sizing:border-box; height:28px; line-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Buttons */
.btn_master,.btn_masterBigLogin,.btn_masterBigLoginC,.btn_log,.btn_Cancelar,.btn_cancel,.btn_danger {
  display:inline-flex; align-items:center; justify-content:center; gap:0.35rem; height:30px; padding:0 14px;
  border-radius:6px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; border:none;
  text-align:center; transition:background-color 0.18s; white-space:nowrap; box-sizing:border-box; vertical-align:middle;
}
.btn_master { background:#0284c7; color:#fff; } .btn_master:hover { background:#0369a1; }
.btn_master.ui-button { background:#0284c7!important; color:#fff!important; border:none!important; height:30px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_master.ui-button .ui-button-text { color:#fff!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_master.ui-button .ui-button-icon, .btn_master.ui-button .ui-button-icon-left { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; line-height:1!important; }
.btn_master.ui-button:hover { background:#0369a1!important; }
.btn_masterBigLogin { background:#0284c7; color:#fff; height:38px; font-size:13px; padding:0 18px; } .btn_masterBigLogin:hover { background:#0369a1; }
.btn_masterBigLoginC { background:#475569; color:#fff; height:38px; font-size:13px; padding:0 18px; } .btn_masterBigLoginC:hover { background:#334155; }
.btn_log { background:#0284c7; color:#fff; height:38px; font-size:14px; font-weight:700; padding:0 24px; border-radius:8px; } .btn_log:hover { background:#0369a1; }
.btn_Cancelar,.btn_cancel { background:#e2e8f0; color:#334155; border:1px solid #cbd5e1; } .btn_Cancelar:hover,.btn_cancel:hover { background:#cbd5e1; }
.btn_Cancelar.ui-button,.btn_cancel.ui-button { background:#e2e8f0!important; color:#334155!important; border:1px solid #cbd5e1!important; height:30px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; width:auto!important; }
.btn_Cancelar.ui-button:hover,.btn_cancel.ui-button:hover { background:#cbd5e1!important; }
.btn_Cancelar.ui-button .ui-button-text,.btn_cancel.ui-button .ui-button-text { color:#334155!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_danger { background:#ef4444; color:#fff; } .btn_danger:hover { background:#dc2626; }
.btn_masterListWork { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 14px; border-radius:6px; font-size:12px; font-weight:600; background:#0284c7; color:white; border:none; cursor:pointer; font-family:inherit; transition:background-color 0.18s; white-space:nowrap; box-sizing:border-box; vertical-align:top; }
.btn_masterListWork:hover { background:#0369a1; }
.btn_masterListWork.ui-button { background:#0284c7!important; border:none!important; border-radius:6px!important; height:30px!important; padding:0 14px!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_masterListWork.ui-button:hover { background:#0369a1!important; }
.btn_masterListWork .ui-button-text { color:white!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_masterListWork.ui-button .ui-button-icon, .btn_masterListWork.ui-button .ui-button-icon-left { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; line-height:1!important; }
/* Loading icon: keep it at the icon's flex position (left side), not centered like text-only buttons */
.btn_masterListWork.ui-button .ui-icon-loading { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; }
.btn_master.ui-button .ui-icon-loading { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; }
.imgVerifyBioIco.ui-button,.imgUploadvalidation.ui-button,.imgConsultaRg { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:28px!important; height:28px!important; padding:0!important; border-radius:6px!important; background:#f1f5f9!important; border:1px solid #e2e8f0!important; color:#64748b!important; cursor:pointer!important; vertical-align:top; }
.imgVerifyBioIco.ui-button:hover,.imgUploadvalidation.ui-button:hover { background:#e0f2fe!important; border-color:#0284c7!important; color:#0284c7!important; }
.imgVerifyBioIco .ui-button-text,.imgUploadvalidation .ui-button-text { display:none!important; }
.btn_UploadDossie.ui-button,.btn_UploadDossie { display:inline-flex!important; align-items:center!important; justify-content:center!important; height:30px!important; padding:0 14px!important; border-radius:6px!important; font-size:12px!important; font-weight:600!important; background:#0284c7!important; color:white!important; border:none!important; cursor:pointer!important; box-shadow:none!important; white-space:nowrap; }
.btn_UploadDossie.ui-button:hover,.btn_UploadDossie:hover { background:#0369a1!important; }
.btn_UploadDossie .ui-button-text { color:white!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.imgExcluirIco.ui-button { width:28px!important; height:28px!important; padding:0!important; border-radius:6px!important; background:#fee2e2!important; border:1px solid #fca5a5!important; color:#ef4444!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; box-shadow:none!important; }
.imgExcluirIco.ui-button:hover { background:#fecaca!important; border-color:#ef4444!important; }
.imgExcluirIco .ui-button-text { display:none!important; }
.imgExcluirIco .ui-button-icon { font-size:13px!important; margin:0!important; color:#ef4444!important; }
.imgAttachmentCheckerIco.ui-button { width:28px!important; height:28px!important; padding:0!important; border-radius:6px!important; background:#dcfce7!important; border:1px solid #86efac!important; color:#16a34a!important; cursor:default!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; box-shadow:none!important; }
.imgAttachmentCheckerIco .ui-button-text { display:none!important; } .imgAttachmentCheckerIco .ui-button-icon { font-size:13px!important; margin:0!important; }
/* assignatureico — signature icon buttons (Dossiê modals) */
.assignatureico.ui-button { width:30px!important; height:30px!important; padding:0!important; border-radius:6px!important; background:transparent!important; border:none!important; color:var(--sar-slate-500)!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; box-shadow:none!important; }
.assignatureico.ui-button:hover { background:var(--sar-primary-light,#e0f2fe)!important; color:var(--sar-primary,#0284c7)!important; }
.assignatureico .ui-button-text { display:none!important; }
.assignatureico .ui-button-icon { font-size:14px!important; margin:0!important; }

/* ---- 10. DATATABLE INSIDE FORMS ----------------------------- */
.ui-datatable-old { margin:0.5rem 0 0.75rem 0; }
.colInternasform .ui-datatable thead th,.colInternasform .ui-datatable th,
.ui-datatable-old .ui-datatable thead th,.ui-datatable-old .ui-datatable th { background:#1e293b!important; color:#fff!important; font-size:10px!important; font-weight:700!important; text-transform:uppercase!important; letter-spacing:0.05em!important; padding:0.5rem 0.75rem!important; border:none!important; border-right:1px solid rgba(255,255,255,0.1)!important; white-space:nowrap; }
.colInternasform .ui-datatable th span,.colInternasform .ui-datatable th .ui-column-title,
.ui-datatable-old .ui-datatable th span,.ui-datatable-old .ui-datatable th .ui-column-title { color:#fff!important; }
.colInternasform .ui-datatable tbody tr.even-row,.ui-datatable-old .ui-datatable tbody tr.even-row { background:#f8fafc!important; }
.colInternasform .ui-datatable tbody tr.odd-row,.ui-datatable-old .ui-datatable tbody tr.odd-row   { background:#fff!important; }
.colInternasform .ui-datatable tbody tr:hover,.ui-datatable-old .ui-datatable tbody tr:hover { background:#e0f2fe!important; }
.colInternasform .ui-datatable tbody td,.ui-datatable-old .ui-datatable tbody td { padding:0.5rem 0.75rem!important; font-size:12px!important; color:#0f172a!important; border:none!important; border-bottom:1px solid #e2e8f0!important; }
.colInternasform .ui-datatable .ui-paginator,.ui-datatable-old .ui-datatable .ui-paginator { background:#f8fafc!important; border:none!important; border-top:1px solid #e2e8f0!important; padding:0.4rem 0.75rem!important; }
/* DataTable inside dialogs */
.ui-dialog .ui-datatable thead th,.ui-dialog .ui-datatable th { background:#1e293b!important; color:#fff!important; font-size:10px!important; font-weight:700!important; text-transform:uppercase!important; letter-spacing:0.05em!important; padding:0.5rem 0.75rem!important; border:none!important; white-space:nowrap; }
.ui-dialog .ui-datatable th span,.ui-dialog .ui-datatable th .ui-column-title { color:#fff!important; }
.ui-dialog .ui-datatable tbody tr.even-row { background:#f8fafc!important; }
.ui-dialog .ui-datatable tbody tr.odd-row  { background:#fff!important; }
.ui-dialog .ui-datatable tbody tr:hover    { background:#e0f2fe!important; }
.ui-dialog .ui-datatable tbody td { padding:0.75rem!important; font-size:13px!important; border:none!important; border-bottom:1px solid #e2e8f0!important; vertical-align:top; }
.ui-dialog .ui-paginator { background:#f8fafc!important; border:none!important; border-top:1px solid #e2e8f0!important; padding:0.4rem 0.75rem!important; display:flex!important; align-items:center!important; gap:0.25rem!important; }

/* ---- 11. MISC UTILITY --------------------------------------- */
.logo175 { display:inline-block; width:175px; height:42px; background:url('/common-static-web/static/css/themes/SkinDynamic/images/logo.png') no-repeat center/contain; text-indent:-9999px; overflow:hidden; vertical-align:middle; }
.statusAtivo{color:#10b981;font-weight:600}  .statusInativo{color:#ef4444;font-weight:600}  .statusAguard{color:#f59e0b;font-weight:600}
.simulaInputWarning3 { display:block; background:#fef3c7; border:1px solid #f59e0b; border-radius:6px; padding:0.5rem 0.75rem; font-size:12px; color:#92400e; margin-bottom:0.75rem; }
.tituloprodut { margin-top:0.75rem; margin-bottom:0.5rem; }
ul.tabs { list-style:none; padding:0; margin:0 0 0.5rem 0; display:flex; }
ul.tabs li a { display:inline-flex; align-items:center; padding:0.35rem 0.85rem; font-size:12px; font-weight:700; color:#0f172a; border-bottom:2px solid #0284c7; text-decoration:none; }
.alinhaInput02,.alinhaInputd02 { margin-left:8px!important; vertical-align:top; }
.switch-container { display:flex!important; align-items:center!important; justify-content:space-between!important; }
.tab_conteudo { display:block; }
.boxBarraButtons { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:0.5rem; padding:0.5rem 0; }
.boxLoading_ { display:block; box-sizing:border-box; }
.boxInputsSearchListWork { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.5rem; padding:0.75rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:0.75rem; }
.boxInputsListworkEsquerda { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.5rem; flex:1; }
.spa_addDados.simulaInputWarningAutori { background:#fffbeb!important; border:1px solid #fde68a!important; border-radius:8px!important; color:#78350f!important; padding:0.5rem 1rem!important; font-size:11px!important; display:block!important; width:100%!important; box-sizing:border-box!important; margin:0!important; height:auto!important; white-space:normal!important; }
#panelButton { background:white!important; border-radius:12px!important; border:1px solid var(--sar-slate-200)!important; padding:0.875rem 1.25rem!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:0.5rem!important; box-shadow:0 1px 4px rgba(0,0,0,0.04)!important; margin-top:0.75rem!important; }
#panelButton .ui-button { float:none!important; margin:0!important; flex-shrink:0!important; height:34px!important; width:auto!important; order:1; }
#panelButton .esquerda.ui-button { order:1; }
#panelButton .direita.ui-button { order:3; }
#panelButton::after { content:''; flex:1 1 auto; order:2; }
#panelButton div.clear { display:none!important; }
/* nprogress */ #nprogress .bar { background:#0284c7; } #nprogress .peg { box-shadow:0 0 10px #0284c7,0 0 5px #0284c7; } #nprogress .spinner-icon { border-top-color:#0284c7; border-left-color:#0284c7; }
/* msDropDown fix */
#dialog_[style*="display: none"] { display:block!important; visibility:hidden!important; height:0!important; overflow:hidden!important; pointer-events:none!important; padding:0!important; margin:0!important; border:none!important; }
.dd { width:100%!important; box-sizing:border-box; margin-left:0!important; }
/* Login legacy */
.buttomFlutuante { display:flex; justify-content:flex-end; align-items:center; gap:0.5rem; }
.buttomFlutuanteCentro { display:flex; justify-content:center; align-items:center; gap:0.5rem; }
.loginTextcoorp { font-size:11px; color:#94a3b8; }
.selectLogin { border:1px solid #e2e8f0; border-radius:8px; font-size:13px; font-family:inherit; background:white; box-shadow:0 1px 4px rgba(0,0,0,0.06); padding:4px 0; outline:none; transition:border-color 0.18s; width:100%; box-sizing:border-box; }
.selectLogin:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,0.1); }
.selectLogin option { padding:6px 8px; cursor:pointer; }
.sar-cert-actions { display:flex; gap:0.5rem; margin-top:0.75rem; }
.sar-login-footer-text { margin-top:1.5rem; text-align:center; font-size:11px; color:rgba(0,0,0,0.35); }

/* ======================================================
   PHASE 2 — WIZARD STEP CIRCLES
   ====================================================== */
ul.etapasValidacao {
  display: flex; list-style: none; padding: 0.5rem 0 0.25rem; margin: 0;
  gap: 0; position: relative; width: 100%;
}
ul.etapasValidacao li {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; position: relative; gap: 6px;
}
/* Connector line between steps */
ul.etapasValidacao li:not(:last-child)::after {
  content: ''; position: absolute; top: 20px;
  left: 50%; width: 100%; height: 2px;
  background: var(--sar-slate-200); z-index: 0;
}
ul.etapasValidacao li.checked_1::after,
ul.etapasValidacao li.checked_2::after,
ul.etapasValidacao li.checked_3::after { background: var(--sar-success); }

.sar-step-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sar-slate-200); color: var(--sar-slate-500);
  font-size: 16px; position: relative; z-index: 1;
  transition: all 0.3s ease;
}
.sar-step-label {
  font-size: 10px; font-weight: 600; text-align: center;
  color: var(--sar-slate-500); letter-spacing: 0.04em; text-transform: uppercase;
}
/* Completed */
li.checked_1 .sar-step-circle, li.checked_2 .sar-step-circle, li.checked_3 .sar-step-circle {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white; box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}
li.checked_1 .sar-step-label, li.checked_2 .sar-step-label, li.checked_3 .sar-step-label { color: var(--sar-success); }
/* Active */
li.activ1 .sar-step-circle, li.activ2 .sar-step-circle,
li.activ3 .sar-step-circle, li.activ4 .sar-step-circle {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white; box-shadow: 0 4px 16px rgba(2,132,199,0.5);
  animation: sar-step-glow 2s ease-in-out infinite;
}
li.activ1 .sar-step-circle::before, li.activ2 .sar-step-circle::before,
li.activ3 .sar-step-circle::before, li.activ4 .sar-step-circle::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(2,132,199,0.35);
  animation: sar-ring-expand 2s ease-in-out infinite;
}
li.activ1 .sar-step-circle i, li.activ2 .sar-step-circle i,
li.activ3 .sar-step-circle i, li.activ4 .sar-step-circle i {
  animation: sar-icon-float 1.2s ease-in-out infinite alternate;
}
li.activ1 .sar-step-label, li.activ2 .sar-step-label,
li.activ3 .sar-step-label, li.activ4 .sar-step-label { color: var(--sar-primary); font-weight: 700; }
/* Future */
li.opacit .sar-step-circle, li.opacit .sar-step-label { opacity: 0.4; }
/* Status badges below step labels */
li.activ1 .sar-step-label::after, li.activ2 .sar-step-label::after,
li.activ3 .sar-step-label::after, li.activ4 .sar-step-label::after {
  content: 'Em andamento';
  display: block; margin-top: 5px; padding: 2px 8px;
  background: rgba(2,132,199,0.1); border: 1px solid rgba(2,132,199,0.3);
  border-radius: 20px; font-size: 9px; font-weight: 700;
  color: #0284c7; text-transform: uppercase; letter-spacing: 0.04em;
  animation: sar-badge-pulse 2s ease-in-out infinite;
}
li.checked_1 .sar-step-label::after, li.checked_2 .sar-step-label::after,
li.checked_3 .sar-step-label::after {
  content: 'CONCLUÍDO';
  display: block; margin-top: 5px; padding: 2px 8px;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
  border-radius: 20px; font-size: 9px; font-weight: 600;
  color: #059669; text-transform: uppercase; letter-spacing: 0.04em;
}
@keyframes sar-badge-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.65; }
}

@keyframes sar-step-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(2,132,199,0.5); }
  50%       { box-shadow: 0 4px 28px rgba(2,132,199,0.85); }
}
@keyframes sar-ring-expand {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.12); }
}
@keyframes sar-icon-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

/* ======================================================
   PHASE 3 — FORM LAYOUT, SECTION HEADERS & INFO CHIPS
   ====================================================== */

/* 3.1 Form field base styles (float layout preserved) */

/* Fix 1: cabecalho2 is an empty legacy separator — hide it */
.cabecalho2 { display: none !important; }
/* solicitacao/validacao wrap the cabecalho1 chip section; alt25 clips it to 25px → overlap with form */
.solicitacao, .validacao, .verificacao, .emissao { height: auto !important; overflow: visible; }

/* Fix 2: lab_add / lab_addDireita — clean label typography, no layout change */
.lab_add, .lab_addDireita, .lab_Titulos {
  display: block;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--sar-slate-500);
  margin-bottom: 3px; white-space: nowrap;
}
/* lab_Titulos on buttons must not override the button's own text color */
.ui-button.lab_Titulos, .ui-button.lab_Titulos span { color: inherit !important; }
.inp_add, .inp_addDireita, .inp_addsemMargem {
  display: block !important;
  height: 30px; border: 1px solid var(--sar-slate-200);
  border-radius: var(--sar-radius); background: white;
  font-size: 13px; padding: 0 8px; box-sizing: border-box;
  transition: border-color var(--sar-transition), box-shadow var(--sar-transition);
}
.inp_add:focus, .inp_addDireita:focus {
  border-color: var(--sar-primary);
  box-shadow: 0 0 0 3px rgba(2,132,199,0.12); outline: none;
}
/* Fix 3: alt* height classes — let content determine height inside form rows */
.boxInputsEsquerda, .boxInputsDireita, .boxCei, .boxInputsSemMArgem { height: auto !important; }
/* Fix 4: outer form row containers inside colInternasform — full width, no horizontal offset */
.colInternasform .boxInputsEsquerda.tam935,
.colInternasform .boxInputsEsquerda.tam900 {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
/* Fix 5: section-level column divs — proportional widths so two sections fit side by side */
/* addRequest: CNPJ outer section (tam520) → 55%, RAZÃO SOCIAL (tam440) → 43% */
.colInternasform .boxInputsEsquerda.tam520 { width: 55% !important; }
.colInternasform .boxInputsEsquerda.tam440 { width: 43% !important; }
/* validateRequest: CNPJ outer section (tam523) → 55%, RAZÃO SOCIAL (tam480) → 43% */
.colInternasform .boxInputsEsquerda.tam523 { width: 55% !important; }
.colInternasform .boxInputsEsquerda.tam480 { width: 43% !important; }
/* Inner columns INSIDE full-width outer rows override the general 43% above → 49% each */
.colInternasform .boxInputsEsquerda.tam935 > .boxInputsEsquerda.tam480,
.colInternasform .boxInputsEsquerda.tam935 > .boxInputsEsquerda.tam490,
.colInternasform .boxInputsEsquerda.tam900 > .boxInputsEsquerda.tam480,
.colInternasform .boxInputsEsquerda.tam900 > .boxInputsEsquerda.tam490 { width: 49% !important; }
.colInternasform .boxInputsDireita.tam400,
.colInternasform .boxInputsDireita.tam380,
.colInternasform .boxInputsDireita.tam440 { width: 49% !important; }
/* tam480 right column needs 55% so its inner UF+Cidade boxes (tam230+tam240=470px) fit */
.colInternasform .boxInputsDireita.tam480 { width: 55% !important; }
/* Fix 6: inputs fill their float column — eliminates narrow tam* on individual inputs */
.colInternasform .inp_add,
.colInternasform .inp_addDireita,
.colInternasform .inp_addsemMargem,
.colInternasform .simulaInput {
  width: 100% !important; box-sizing: border-box !important;
}
.colInternasform .ui-inputtext,
.colInternasform .ui-inputmask { width: 100% !important; box-sizing: border-box !important; }
.colInternasform select,
.colInternasform .ui-selectonemenu { width: 100% !important; max-width: 100% !important; }
/* Fix 6b: checkboxes/radios with inp_add class must NOT get input sizing */
.colInternasform input[type="checkbox"].inp_add,
.colInternasform input[type="radio"].inp_add,
input[type="checkbox"].inp_add,
input[type="radio"].inp_add {
  width: auto !important; height: auto !important;
  padding: 0 !important; border: none !important;
  border-radius: 0 !important; background: none !important;
  display: inline-block !important; box-sizing: content-box !important;
  font-size: inherit !important; box-shadow: none !important;
}
/* Height + style for PrimeFaces components */
.colInternasform .ui-inputtext, .colInternasform .ui-inputmask,
.colInternasform select, .colInternasform .ui-selectonemenu {
  height: 30px !important; font-size: 12px !important; border-radius: 7px !important;
}
.colInternasform .simulaInput {
  display: flex !important; align-items: center !important;
  height: 30px !important; font-size: 12px !important; border-radius: 7px !important;
  background: #f8fafc !important; border: 1px solid #e2e8f0 !important;
  padding: 4px 10px !important;
}
/* Fix 7: Labels — no float, full width, no horizontal margins.
   "esquerda" (float:left) on labels fights the stacked layout; must be zeroed. */
.colInternasform .lab_add,
.colInternasform .lab_addDireita,
.colInternasform .lab_Titulos {
  float: none !important; width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
/* Fix 7b: Inputs — no float, no horizontal margins.
   "esquerda" (float:left) on inputs causes side-by-side instead of stacked. */
.colInternasform .inp_add,
.colInternasform .inp_addDireita,
.colInternasform .inp_addsemMargem,
.colInternasform .simulaInput {
  float: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
/* Fix 8: CPF/biometry row width — the tam480 that wraps CPF + icon buttons + date of birth
   needs 100% width because it has 4+ items; :has() distinguishes it from plain Razão Social */
.colInternasform .boxInputsEsquerda.tam480:has(.imgVerifyBioIco),
.colInternasform .boxInputsEsquerda.tam480:has(.imgUploadvalidation) {
  width: 100% !important;
}
/* Fix 8b: CPF+Date row fallback — :has(.imgVerifyBioIco) in Fix 8 fails when renderBioModule=false.
   tam170 (date-of-birth column) is always present, so use it as the fingerprint instead. */
.colInternasform .boxInputsEsquerda.tam480:has(> .boxInputsEsquerda.tam170) { width: 100% !important; }
/* Fix 13: ECPF Date Nasc column uses <div class="boxInputsEsquerda"> with NO tam class.
   Fix 7's width:100% on the label makes the float's intrinsic width resolve to the full
   parent tam500 (~500px), which exceeds the remaining space (300px) → wraps below CPF.
   Explicit calc width fixes the intrinsic sizing. */
.colInternasform .boxInputsEsquerda.tam480 > .boxInputsEsquerda:not([class*="tam"]) {
  width: calc(100% - 205px) !important;
}
/* Fix 13b: validateRequest ECPF Date Nasc — plain <div> (no class) inside the CPF+Date left col.
   Non-floated block auto-spans full container; overflow:hidden creates a BFC that auto-sizes
   beside the CPF (185px) + Upload (100px) floats → remaining space, input fits without wrapping. */
.colInternasform .boxInputsEsquerda.tam480 > div:not([class]) {
  overflow: hidden;
}
/* Fix 14: Paired left columns (NOME / TÍTULO / ENDEREÇO) → 50% when floated beside a right tam480.
   Applies to: ECPF NOME*, ECNPJ NOME PATROCINADOR, TÍTULO+ZONA, address street (both pages).
   clear:both on tam500 rows (addRequest TÍTULO) — they follow dataRefreshCPF panel, not a boxInputsDireita,
   so Fix 16's + selector can't reach them; tam500 is unique to addRequest's TÍTULO row. */
.colInternasform .boxInputsEsquerda.tam480:has(~ .boxInputsDireita.tam480) { width: 50% !important; }
.colInternasform .boxInputsEsquerda.tam500:has(~ .boxInputsDireita.tam480) { width: 50% !important; clear: both !important; }
/* Fix 14b: addRequest ECPF RG+ÓRGÃO+UF right col — fingerprint: tam120 (ÓRGÃO EMISSOR) direct child */
.colInternasform .boxInputsDireita.tam480:has(> .boxInputsEsquerda.tam120) { width: 48% !important; }
.colInternasform .boxInputsDireita.tam480:has(> .boxInputsEsquerda.tam120) > .boxInputsEsquerda.tam230 { width: 46% !important; }
.colInternasform .boxInputsDireita.tam480:has(> .boxInputsEsquerda.tam120) > .boxInputsEsquerda.tam120 { width: 25% !important; }
.colInternasform .boxInputsDireita.tam480:has(> .boxInputsEsquerda.tam120) > .boxInputsEsquerda.tam100 { width: 21% !important; }
/* Fix 14c: addRequest TÍTULO+ZONA inner — parent is 50% (~460px); tam310+tam180 need % */
.colInternasform .boxInputsEsquerda.tam500:has(~ .boxInputsDireita.tam480) > .boxInputsEsquerda.tam310 { width: 63% !important; }
.colInternasform .boxInputsEsquerda.tam500:has(~ .boxInputsDireita.tam480) > .boxInputsEsquerda.tam180 { width: 35% !important; }
/* Fix 15: All right-float tam480 cols paired with a 50% left col → 48% (overrides Fix 5's 55%).
   Exception: cols containing an inner tam480 wrapper (addRequest PJ UF+Cidade, needs 55%
   to fit tam230+tam240=470px without converting inner pixels to %). */
.colInternasform .boxInputsDireita.tam480:not(:has(> .boxInputsEsquerda.tam480)) { width: 48% !important; }
/* Fix 15b: Inner column % for 48%-wide right cols — fixed-px children would overflow 48%≈442px.
   Covers: validateRequest/addRequest ECPF RG (tam150+tam140+tam140), ECNPJ RG PATROCINADOR
   (tam150+tam140+tam140 or tam140×3), incapable-person RG, address NUMBER+COMPLEMENT+BAIRRO (tam140×3).
   The > combinator ensures cols inside p:outputPanel wrappers (e.g. SEÇÃO STATE/CITY) are unaffected. */
.colInternasform .boxInputsDireita.tam480:not(:has(> .boxInputsEsquerda.tam480)) > .boxInputsEsquerda.tam140 { width: 30% !important; }
.colInternasform .boxInputsDireita.tam480:not(:has(> .boxInputsEsquerda.tam480)) > .boxInputsEsquerda.tam150 { width: 33% !important; }
/* Fix 15c: validateRequest TÍTULO+ZONA inner — tam240+tam240 (480px) in 50% parent (~460px) overflow.
   addRequest uses tam500 parent with tam310+tam180 (Fix 14c handles those separately). */
.colInternasform .boxInputsEsquerda.tam480:has(~ .boxInputsDireita.tam480) > .boxInputsEsquerda.tam240 { width: 48% !important; }
/* Fix 16: clear row floats — left-col pairs (NOME, TÍTULO) must start below the
   preceding right-col float (Buttons, RG). Without this, NOME floats UP beside
   the taller Buttons column instead of starting a fresh row below it.
   Selector targets any boxInputsEsquerda.tam480 immediately following a boxInputsDireita.tam480. */
.colInternasform .boxInputsDireita.tam480 + .boxInputsEsquerda.tam480 {
  clear: both !important;
}
/* Fix 9: inner tam480 nested inside another boxInputs column must not inherit the section-level
   43% width; child combinator (>) ensures only direct-parent cases are reset */
.colInternasform .boxInputsEsquerda.tam480 > .boxInputsEsquerda.tam480,
.colInternasform .boxInputsDireita.tam480 > .boxInputsEsquerda.tam480 {
  width: 100% !important;
}
/* Fix 10: UF+Cidade outer row in validateRequest uses tam256+tam210 (466px total) inside a
   43%-wide tam480 → they overflow; widen the row to 100% using tam256 as a fingerprint */
.colInternasform .boxInputsEsquerda.tam480:has(> .boxInputsEsquerda.tam256) {
  width: 100% !important;
}
/* Fix 11: tam1004 / tam1010 containers exceed the form width and overflow;
   reset to 100%. Inner boxInputsSemMArgem.tam500 pairs float side by side at 48% each. */
.colInternasform .boxInputsEsquerda.tam1004,
.colInternasform .boxInputsEsquerda.tam1010,
.colInternasform .boxCei.tam1004,
.colInternasform .boxCei.tam1010 {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
.colInternasform .boxInputsEsquerda.tam1004 > .boxInputsSemMArgem.tam500,
.colInternasform .boxInputsEsquerda.tam1010 > .boxInputsSemMArgem.tam500 {
  width: 48% !important; float: left !important;
}
/* Fix 11b: Endereço uses a <p:panel styleClass="alt100 tam1004"> as a layout wrapper.
   Strip panel chrome and reset width; make its inner tam500 pairs sit side by side. */
.colInternasform .tam1004.ui-panel,
.colInternasform .tam1010.ui-panel {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; box-shadow: none !important; background: transparent !important;
}
.colInternasform .tam1004.ui-panel > .ui-panel-titlebar,
.colInternasform .tam1010.ui-panel > .ui-panel-titlebar { display: none !important; }
.colInternasform .tam1004.ui-panel > .ui-panel-content-wrapper,
.colInternasform .tam1004.ui-panel > .ui-panel-content,
.colInternasform .tam1010.ui-panel > .ui-panel-content-wrapper,
.colInternasform .tam1010.ui-panel > .ui-panel-content { padding: 0 !important; }
/* boxInputsEsquerda.tam500 direct children of tam1004 → side by side (address row pairs) */
.colInternasform .boxInputsEsquerda.tam1004 > .boxInputsEsquerda.tam500 {
  width: 48% !important; float: left !important;
}
/* Fix 12: "Incluir representantes" entry row — 6 floated columns total ~1200px.
   Convert to flex so all fields fit proportionally in one row. */
.colInternasform .boxInputsEsquerda.margin-00L {
  display: flex !important; flex-wrap: wrap !important;
  gap: 0.5rem !important; align-items: flex-start !important;
  height: auto !important;
}
.colInternasform .boxInputsEsquerda.margin-00L > .boxInputsEsquerda,
.colInternasform .boxInputsEsquerda.margin-00L > .boxInputsDireita {
  float: none !important; flex: 1 1 130px !important;
  width: auto !important; min-width: 0 !important;
}
/* "Incluir Representante" button: skip label height so it aligns with adjacent inputs */
.colInternasform .boxInputsEsquerda.margin-00L .btn_UploadDossie.ui-button {
  width: 100% !important; margin: 18px 0 0 0 !important;
}
/* Fix 13: Bio/upload buttons inside float columns — align with input row (label offset ~18px) */
.colInternasform .imgVerifyBioIco.ui-button {
  margin-left: 0 !important; margin-right: 0 !important; margin-top: 18px !important;
}
.colInternasform .boxInputsEsquerda .imgUploadvalidation.ui-button {
  margin-top: 18px !important;
}
/* Fix 14: RFB / biometry standalone buttons — align top with inputs in adjacent label column */
.colInternasform .btn_masterListWork.ui-button.margin10T,
.colInternasform .btn_masterListWork.ui-button.margin15T {
  margin-top: 18px !important;
}
/* Fix 15: Lista de Documentos — action buttons side by side in flex row */
#listDossie .centro {
  display: flex !important; align-items: center; justify-content: center; gap: 4px;
}
#listDossie .imgDetalhesIco.ui-button { margin-left: 0 !important; }

/* 3.2 Section headers — gradient + blue left accent */
.fundoSubtitulos900 {
  background: linear-gradient(to right, var(--sar-slate-50), white) !important;
  border: none !important;
  border-left: 3px solid var(--sar-primary) !important;
  border-radius: 0 var(--sar-radius) var(--sar-radius) 0 !important;
  padding: 0.5rem 0.75rem !important; margin-bottom: 0.5rem !important;
}
.fundoSubtitulos900 .subti_pagInternas,
.fundoSubtitulos900 h2, .fundoSubtitulos900 h3 {
  color: var(--sar-slate-800) !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 !important;
}
.fundoSubtitulos600 {
  background: linear-gradient(to right, #f0f9ff, white) !important;
  border: none !important;
  border-left: 3px solid var(--sar-primary) !important;
  border-radius: 0 var(--sar-radius) var(--sar-radius) 0 !important;
  padding: 0.4rem 0.75rem !important; margin-bottom: 0.5rem !important;
}
.fundoSubtitulos600 .subti_pagInternas, .fundoSubtitulos600 h2 {
  color: var(--sar-slate-700) !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 !important;
}
.fundoSubtitulos100 {
  background: #f8fafc !important; border-left: 3px solid #0284c7 !important;
  border-radius: 4px !important; padding: 0.4rem 0.75rem !important; margin-bottom: 0.75rem !important;
}
.fundoSubtitulos100 .subti_pagInternas, .fundoSubtitulos100 h2 {
  color: #1e293b !important; font-size: 12px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.04em !important; margin: 0 !important;
}

/* 3.3 Info chips (cabecalho1 / face01) */
.cabecalho1 {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  padding: 0.6rem 1rem; background: white;
  border-radius: 8px; border: 1px solid var(--sar-slate-200);
  margin-bottom: 1rem; align-items: center;
}
.face01 {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.9rem; border-radius: 10px;
  border: 1px solid transparent; flex: 0 1 auto; min-width: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
/* Produto chip — orange */
.face01:nth-child(1) { background: linear-gradient(135deg,#fff7ed,#fed7aa); border-color: #fdba74; }
/* Ticket chip — blue */
.face01:nth-child(2) { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: #93c5fd; }
/* Icon circle inside each chip */
.sar-chip-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.face01:nth-child(1) .sar-chip-icon { background: rgba(234,88,12,.15); color: #ea580c; }
.face01:nth-child(2) .sar-chip-icon { background: rgba(37,99,235,.13); color: #2563eb; }
/* Text stack: label over value */
.sar-chip-text { display: flex; flex-direction: column; min-width: 0; }
.lab_cabecalho {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--sar-slate-500); display: block; line-height: 1.2;
}
.lab_cabecalho_dados {
  font-size: 13px; font-weight: 700; color: var(--sar-slate-800);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3;
}

/* ======================================================
   PHASE 4 — PAGE HEADER CARD (fundoTitulo100)
   ====================================================== */
.fundoTitulo100 {
  background: white !important;
  border-radius: var(--sar-radius-lg) !important;
  border: 1px solid var(--sar-slate-200) !important;
  box-shadow: var(--sar-shadow) !important;
  padding: 1rem 1.25rem 0.75rem !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important; position: relative !important;
}
.fundoTitulo100::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--sar-primary), #7c3aed);
}
.ti_pagInternas {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--sar-slate-900) !important; margin: 0 !important;
}
/* Wizard card: title with icon-box prefix and divider */
.fundoTitulo100 .headerContainerValidacao .ti_pagInternas {
  display: flex !important; align-items: center !important;
  gap: 0.75rem !important; padding-bottom: 0.875rem !important;
  border-bottom: 1px solid var(--sar-slate-200) !important;
  font-size: 14px !important; text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.fundoTitulo100 .headerContainerValidacao .ti_pagInternas::before {
  content: ''; display: inline-flex; flex-shrink: 0;
  width: 30px; height: 30px; background: #1e293b;
  border-radius: 7px; box-shadow: 0 2px 8px rgba(15,23,42,0.25);
}

/* ======================================================
   PHASE 5 — AUDIT TRAIL MODAL ("Trilha")
   ====================================================== */
/* Cap dialog to viewport — no display override (would fight PrimeFaces show/hide) */
#id_dialog_DetailsT { max-height:88vh!important; max-width:min(860px,calc(100vw - 2rem))!important; overflow:hidden!important; }
/* Content scrolls within the capped container; 50px accounts for the slim titlebar */
#id_dialog_DetailsT .ui-dialog-content { overflow-y:auto!important; overflow-x:hidden!important; max-height:calc(88vh - 50px)!important; padding:0!important; background:#fff!important; }
/* Ticket label bar */
#id_dialog_DetailsT .fundoSubtitulos600 { background:#f8fafc!important; border:none!important; border-bottom:1px solid var(--sar-slate-200)!important; border-radius:0!important; padding:0.6rem 1.25rem!important; margin:0!important; }
#id_dialog_DetailsT .fundoSubtitulos600 h2,
#id_dialog_DetailsT .fundoSubtitulos600 .subti_pagInternas { font-size:10px!important; font-weight:700!important; letter-spacing:0.08em!important; color:var(--sar-slate-500)!important; text-transform:uppercase!important; }
#id_dialog_DetailsT .ui-datatable thead { display:none!important; }
#id_dialog_DetailsT .ui-datatable tbody tr td { padding:0!important; border:none!important; background:transparent!important; }
/* Silence alternating row backgrounds and td border from the generic dialog datatable rule */
#id_dialog_DetailsT .ui-datatable table { border-collapse:collapse!important; }
#id_dialog_DetailsT .ui-datatable tbody tr,
#id_dialog_DetailsT .ui-datatable tbody tr.even-row,
#id_dialog_DetailsT .ui-datatable tbody tr.odd-row,
#id_dialog_DetailsT .ui-datatable tbody tr:hover { background:transparent!important; }
/* Each audit event: flat timeline row with colored left accent */
.detalheDescricaoTrial { display:block!important; background:#fff!important; border:none!important; border-left:3px solid var(--sar-primary)!important; border-bottom:1px solid var(--sar-slate-100)!important; margin:0!important; padding:0.875rem 1.25rem!important; border-radius:0!important; box-shadow:none!important; }
#id_dialog_DetailsT tbody tr:nth-child(1) .detalheDescricaoTrial { border-left-color:#0284c7!important; }
#id_dialog_DetailsT tbody tr:nth-child(2) .detalheDescricaoTrial { border-left-color:#7c3aed!important; }
#id_dialog_DetailsT tbody tr:nth-child(3) .detalheDescricaoTrial { border-left-color:#059669!important; }
#id_dialog_DetailsT tbody tr:nth-child(4) .detalheDescricaoTrial { border-left-color:#d97706!important; }
/* Event title */
.spa_addTitle { display:block; font-size:13px; font-weight:700; color:var(--sar-slate-800); margin-bottom:0.5rem; padding-bottom:0.35rem; border-bottom:1px solid var(--sar-slate-100); }
/* Key/value grid */
.sar-trail-grid { display:grid; grid-template-columns:160px 1fr; gap:0.35rem 0.75rem; align-items:center; margin-bottom:0.5rem; }
.spa_add2 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--sar-slate-400); white-space:nowrap; }
.spa_addDados2 { font-size:12px; color:var(--sar-slate-700); word-break:break-word; }
/* Signature sub-section */
.sar-trail-sig { margin-top:0.75rem; padding:0.75rem; background:var(--sar-slate-50,#f8fafc); border:1px solid var(--sar-slate-100,#f1f5f9); border-radius:8px; }
.sar-trail-sig .spa_addTitle { margin-bottom:0.5rem; }
.sar-trail-sig-action { margin-top:0.6rem; }

/* ======================================================
   ICON BUTTON REPLACEMENTS
   ====================================================== */

/* imgVerifyBioIco — biometry verify button (SVG fingerprint; bypasses PrimeIcon color cascade) */
.imgVerifyBioIco.ui-button {
  width: 28px !important; height: 28px !important; padding: 0 !important;
  background: #eff6ff !important; border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; box-shadow: none !important;
  cursor: pointer !important;
}
.imgVerifyBioIco .ui-button-text { display: none !important; }
.imgVerifyBioIco.ui-button .ui-button-icon { display: none !important; }
.imgVerifyBioIco.ui-button::before {
  content: '';
  display: block; width: 14px; height: 14px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 0 1 18-6'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* imgDetalhesIco — audit trail eye button (Trilha column: no background, icon only) */
.imgDetalhesIco.ui-button {
  width: 30px !important; height: 30px !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  border-radius: 6px !important; color: var(--sar-slate-500) !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; box-shadow: none !important;
  cursor: pointer !important;
}
.imgDetalhesIco .ui-button-text { display: none !important; }
.imgDetalhesIco .ui-button-icon { font-size: 14px !important; margin: 0 !important; }
.imgDetalhesIco.ui-button:hover { background: var(--sar-primary-light) !important; color: var(--sar-primary) !important; }

/* imgUploadvalidation — upload/validate document button */
.imgUploadvalidation.ui-button {
  width: 28px !important; height: 28px !important; padding: 0 !important;
  background: #f0fdf4 !important; border: 1px solid #86efac !important;
  border-radius: 6px !important; color: #16a34a !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; box-shadow: none !important;
}
.imgUploadvalidation .ui-button-text { display: none !important; }
.imgUploadvalidation .ui-button-icon { font-size: 13px !important; margin: 0 !important; color: #16a34a !important; }

/* imgConsultaRg — RG query (rendered as p:panel div, not a button) */
.imgConsultaRg.ui-button,
.imgConsultaRg.ui-panel {
  width: 28px !important; height: 28px !important; padding: 0 !important;
  background: #f8fafc !important; border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important; color: #475569 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; box-shadow: none !important;
  cursor: pointer !important; vertical-align: middle !important;
  box-sizing: border-box !important;
}
.imgConsultaRg .ui-button-text { display: none !important; }
.imgConsultaRg .ui-button-icon { font-size: 13px !important; margin: 0 !important; }
/* p:panel version: hide titlebar, inject search icon via SVG pseudo-element */
.imgConsultaRg.ui-panel .ui-panel-titlebar { display: none !important; }
.imgConsultaRg.ui-panel .ui-panel-content {
  padding: 0 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 28px !important; height: 28px !important;
}
.imgConsultaRg.ui-panel .ui-panel-content::before {
  content: '';
  display: block; width: 14px; height: 14px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center/contain;
}
.imgConsultaRg.ui-panel .modal-link { display: none !important; }
.imgConsultaRg.ui-panel:hover { background: #e0f2fe !important; border-color: #0284c7 !important; }
.imgConsultaRg.ui-panel:hover .ui-panel-content::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

/* imgStatusFraudeInBox — fraud alert badge (Trilha column: no background, icon only) */
.imgStatusFraudeInBox.ui-button, .imgStatusFraudeInBox {
  width: 30px !important; height: 30px !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  border-radius: 6px !important; color: #dc2626 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; box-shadow: none !important;
  cursor: default !important;
}
.imgStatusFraudeInBox .ui-button-text { display: none !important; }
.imgStatusFraudeInBox .ui-button-icon { font-size: 13px !important; margin: 0 !important; }

/* ======================================================
   VIDEO CONFERENCE MODAL
   ====================================================== */
/* 4-class selector matches the specificity of the global overflow:hidden rule */
.sar-conference-modal.ui-dialog.ui-widget.ui-widget-content { border-radius:12px!important; overflow:hidden!important; border:none!important; box-shadow:0 25px 60px rgba(0,0,0,0.35),0 8px 20px rgba(0,0,0,0.2)!important; max-height:90vh!important; }
.sar-conference-modal .ui-dialog-titlebar { background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#0284c7 100%)!important; border-radius:0!important; flex-shrink:0!important; }
.sar-conference-modal .ui-dialog-titlebar-close { display:none!important; }
.sar-conference-modal .ui-dialog-content { padding:0!important; background:#f8fafc!important; overflow-y:auto!important; max-height:calc(90vh - 60px)!important; scrollbar-width:thin; scrollbar-color:var(--sar-slate-400) var(--sar-slate-100); }
.sar-conference-modal .ui-dialog-content::-webkit-scrollbar { width:8px!important; }
.sar-conference-modal .ui-dialog-content::-webkit-scrollbar-track { background:var(--sar-slate-100)!important; }
.sar-conference-modal .ui-dialog-content::-webkit-scrollbar-thumb { background:var(--sar-slate-400)!important; border-radius:4px!important; }
.sar-conference-modal .ui-dialog-content::-webkit-scrollbar-thumb:hover { background:var(--sar-slate-500)!important; }
.sar-conf-body { padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
.sar-conf-section { background:white; border:1px solid var(--sar-slate-200); border-radius:var(--sar-radius-lg); padding:1.25rem 1.5rem; box-shadow:var(--sar-shadow); }
.sar-conf-section-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--sar-slate-500); margin-bottom:0.85rem; padding-bottom:0.5rem; border-bottom:1px solid var(--sar-slate-200); display:block; }
.sar-sse-dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:#C9C728; box-shadow:0 0 0 3px rgba(201,199,40,0.25); transition:background 0.4s,box-shadow 0.4s; }
.sar-sse-dot.connected { background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.25); }
.sar-sse-dot.error { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.25); }
.sar-conf-iframe { width:100%; border-radius:10px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.12); border:1px solid var(--sar-slate-200); }
.sar-conf-iframe iframe { display:block; width:100%; height:560px; border:none; }
.sar-conf-gallery { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:0.75rem; justify-content:center; }
.sar-conf-gallery img { width:120px; height:120px; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer; transition:border-color 0.2s,box-shadow 0.2s; }
.sar-conf-gallery img.selected { border-color:var(--sar-primary); box-shadow:0 0 0 3px rgba(2,132,199,0.2); }
.sar-conf-success { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; text-align:center; gap:1.5rem; animation:sar-fadein 0.3s ease; }
.sar-conf-success-icon { width:84px; height:84px; background:linear-gradient(135deg,#10b981,#059669); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:38px; color:white; box-shadow:0 8px 24px rgba(16,185,129,0.4); animation:sar-success-pop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.sar-conf-success h2 { font-size:18px; font-weight:700; color:var(--sar-slate-800); margin:0; }
.sar-conf-success p  { font-size:13px; color:var(--sar-slate-500); margin:0; max-width:320px; }
@keyframes sar-success-pop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
/* Conference action footer bar (close button row at dialog bottom) */
.sar-conf-footer-bar { display:flex; justify-content:flex-end; padding:0.75rem 1.5rem; border-top:1px solid var(--sar-slate-200); background:white; }
/* Delete-meeting button (used only in conference context) */
.btn_vermelho { background-color:#e74c3c!important; color:#fff!important; border:1px solid #c0392b!important; box-shadow:none!important; }
.btn_vermelho:hover,.btn_vermelho.ui-button:hover { background-color:#c0392b!important; border-color:#922b21!important; }
/* Conference modal form field layout — replaces legacy float/tam classes inside modal */
/* 2-column side-by-side form layout inside the conference modal */
.sar-conf-fields { display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem; align-items:flex-start; }
.sar-conf-field { flex:0 0 calc(50% - 0.5rem); min-width:180px; display:flex; flex-direction:column; gap:0.3rem; }
.sar-conf-span-full { flex:0 0 100%; }
.sar-conf-label { font-size:11px; font-weight:600; color:var(--sar-slate-500); text-transform:uppercase; letter-spacing:0.04em; display:block; }
.sar-conf-cpf-msg { font-size:11px; margin-top:2px; display:block; }
.sar-conf-field .inp_add,
.sar-conf-field .ui-inputfield { width:100%!important; margin:0!important; box-sizing:border-box!important; }
/* CPF input + Validar button inline — inner flex row inside a .sar-conf-field half-width cell */
.sar-conf-cpf-row { display:flex; gap:0.5rem; align-items:center; }
.sar-conf-cpf-row .ui-inputwrapper { display:block!important; flex:1; min-width:0; }
.sar-conf-cpf-row .ui-inputwrapper input { width:100%!important; margin:0!important; box-sizing:border-box!important; }
.sar-conf-actions { flex:0 0 100%; display:flex; gap:0.5rem; flex-wrap:wrap; padding-top:0.75rem; border-top:1px solid var(--sar-slate-200); }
/* X close button inside conference modal title bar */
.sar-conf-close-btn { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); color:white; border-radius:6px; width:28px; height:28px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:background 0.2s; padding:0; flex-shrink:0; line-height:1; }
.sar-conf-close-btn:hover { background:rgba(255,255,255,0.3); }

/* ======================================================
   CONFERENCE TAB — 2-COLUMN LAYOUT
   ====================================================== */
/* Custom tab bar (CSS-only, no NamingContainer) */
.sar-main-tab-bar { display:flex; gap:0; border-bottom:2px solid var(--sar-slate-200); margin-bottom:1rem; }
.sar-main-tab-btn { background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; padding:.6rem 1.2rem; font-size:.875rem; font-weight:600; color:var(--sar-slate-500); cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:color 0.2s,border-color 0.2s; }
.sar-main-tab-btn:hover:not(.sar-tab-disabled) { color:var(--sar-primary); }
.sar-main-tab-btn.active { color:var(--sar-primary); border-bottom-color:var(--sar-primary); }
.sar-main-tab-btn.sar-tab-disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.sar-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:700; line-height:1; border-radius:9px; background:var(--sar-danger,#ef4444); color:#fff; box-sizing:border-box; animation:sarBadgePop .15s ease; }
@keyframes sarBadgePop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.sar-main-tab-panel { display:block; }

/* 2-column grid: left (form+video) + right (sidebar) */
.sar-conf-layout { display:grid; grid-template-columns:1fr 260px; gap:1.5rem; align-items:start; padding:1rem 0; }
.sar-conf-main { display:flex; flex-direction:column; gap:1.25rem; }
@media (max-width:1024px) { .sar-conf-layout { grid-template-columns:1fr; } }

/* Right sidebar — sticky below the topbar (56px) */
.sar-conf-sidebar {
  display:flex; flex-direction:column; gap:1rem;
  position:sticky; top:calc(56px + 1.25rem);
}

/* Identity card */
.sar-conf-id-card { background:var(--surface-card,#fff); border:1px solid var(--sar-slate-200); border-radius:12px; padding:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.07); display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.sar-conf-id-photo { width:100%; display:flex; justify-content:center; }
.sar-conf-id-photo img { width:120px; height:120px; object-fit:cover; border-radius:10px; border:2px solid var(--sar-primary); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.sar-conf-id-photo-placeholder { width:120px; height:120px; border-radius:10px; border:2px dashed var(--sar-slate-300); display:flex; align-items:center; justify-content:center; color:var(--sar-slate-400); font-size:2.5rem; background:var(--sar-slate-50); }
.sar-conf-id-info { width:100%; display:flex; flex-direction:column; gap:.35rem; }
.sar-conf-id-name { font-weight:700; font-size:1rem; color:var(--text-color,#1e293b); text-align:center; display:block; margin-bottom:.25rem; }
.sar-conf-id-row { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--text-color-secondary,#64748b); }
.sar-conf-id-row .pi { color:var(--sar-primary); font-size:.85rem; flex-shrink:0; }

/* SSE photo section */
.sar-conf-sse-photo { background:var(--surface-card,#fff); border:1px solid var(--sar-slate-200); border-radius:12px; padding:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.07); display:flex; flex-direction:column; gap:.75rem; }
.sar-conf-sidebar-section-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sar-slate-500); display:block; margin-bottom:.25rem; }
.sar-conf-sse-actions { display:flex; flex-direction:column; gap:.5rem; }
.sar-conf-sse-actions .ui-button { width:100%!important; justify-content:center; }
.sar-conf-gallery-msg { font-size:11px; color:var(--sar-slate-500); display:block; margin-top:.35rem; }
.sar-conf-no-photo-msg { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid var(--sar-warning); border-radius:var(--sar-radius); color:#92400e; font-size:13px; }
.sar-tab-spinner { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 0; gap:.75rem; }
.sar-btn-icon-only { background:transparent!important; border:none!important; box-shadow:none!important; color:var(--sar-primary)!important; padding:.25rem .4rem!important; margin-left:.5rem; }
.sar-btn-icon-only:hover { background:var(--surface-hover)!important; }

/* ======================================================
   REPRESENTANTES / MEMBERS TABLE
   ====================================================== */
.sar-members-table-wrap { overflow-x:auto; border-radius:var(--sar-radius); margin-bottom:0.5rem; }
/* Compact rows — override the generic .colInternasform td padding */
.sar-members-table.ui-datatable tbody td { padding:0.3rem 0.6rem !important; vertical-align:middle !important; }
/* Action buttons group: flex with 4px gap, centred in cell */
.sar-table-actions { display:flex; align-items:center; justify-content:center; gap:4px; }

/* ======================================================
   LOGIN PAGE
   ====================================================== */
.sar-login-body { margin:0; background:#f1f5f9; font-family:var(--font-family); }
/* Left panel — fixed, dark navy.
   The convex right-edge bulge is created by a ::after pseudo-element:
   an oversized white circle that masks the right side of the panel,
   exposing the curved silhouette. Technique: the panel is wider than
   its visual footprint; the white circle "bites" the right edge. */
.sar-login-left {
  position:fixed; top:0; left:0; bottom:0; width:42%;
  background: radial-gradient(ellipse at 35% 35%, #1e3a5f 0%, #0f172a 65%);
  overflow:hidden; z-index:1;
}
/* Large white circle glued to the right edge — creates the convex curve */
.sar-login-left::after {
  content:'';
  position:absolute;
  top:50%; right:-14vw;
  transform:translateY(-50%);
  width:28vw; height:130%;
  background:#f1f5f9;
  border-radius:50%;
  z-index:10;
}
.sar-login-left-content { position:relative; z-index:20; height:100%; display:flex; flex-direction:column; padding:2.5rem 2rem 2.5rem 2.5rem; width:76%; }
.sar-login-left-illus { flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:1.5rem; }
.sar-login-illus-svg { width:82%; max-width:270px; height:auto; display:block; filter:drop-shadow(0 8px 32px rgba(56,189,248,0.28)); }
.sar-login-left-text { padding:0 0 3rem 0; }
.sar-login-left-text h1 { color:white; font-size:24px; font-weight:700; line-height:1.2; margin-bottom:0.5rem; }
.sar-login-left-text p { color:rgba(56,189,248,0.85); font-size:13px; font-weight:400; margin:0; letter-spacing:0.01em; }
/* Right panel: offset by the fixed left panel width; centers form vertically */
.sar-login-right { margin-left:42%; min-height:100vh; background:#f1f5f9; display:flex; align-items:center; justify-content:center; padding:2rem; }
.sar-login-form { width:100%; max-width:420px; }
/* White card wrapping the form content */
.sar-login-card { background:#ffffff; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04); padding:2rem 2rem 1.5rem; width:100%; box-sizing:border-box; }
.sar-login-card-logo { display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.sar-login-logo-img { height:32px; width:auto; display:block; }
.sar-login-form-title { font-size:20px; font-weight:700; color:#0f172a; margin-bottom:0.4rem; line-height:1.2; text-align:center; }
.sar-login-title-sub { font-size:13px; color:#64748b; font-weight:400; text-align:center; margin-top:0.3rem; margin-bottom:1.5rem; }
.sar-login-card-divider { height:1px; background:#e2e8f0; margin:1.25rem 0 1rem; }
.sar-login-card-footer { display:flex; align-items:center; justify-content:center; gap:0; font-size:11px; color:#94a3b8; text-align:center; }
/* Remove old standalone footer text (now inside card) */
.sar-login-footer-text { display:none; }
/* The <form> is a flex child of .sar-login-right (justify-content:center).
   Without an explicit width it shrinks to content, breaking width:100% inside.
   Capping at 420px matches .sar-login-form's max-width. */
.sar-login-right > form { width:100%; max-width:420px; }
.center-content { width:100%; box-sizing:border-box; }
#dialog_ { display:flex!important; flex-direction:column!important; width:100%!important; box-sizing:border-box!important; gap:0.6rem!important; background:white!important; border-radius:12px!important; border:1px solid #e2e8f0!important; padding:1rem!important; box-shadow:0 2px 12px rgba(0,0,0,0.07)!important; }
#dialog_::before { content:'Selecione o certificado'; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--sar-slate-500); display:block; }
#dialog_ > br { display:none!important; }
.sar-select-wrap { width:100%; box-sizing:border-box; }
/* Certificate list — replaces msDropDown */
.sar-cert-list { max-height:180px; overflow-y:auto; overflow-x:hidden; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; width:100%; box-sizing:border-box; }
.sar-cert-item { display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; border-bottom:1px solid #f1f5f9; user-select:none; }
.sar-cert-item:last-child { border-bottom:none; }
.sar-cert-item:hover { background:#f0f9ff; }
.sar-cert-item.selected { background:#dbeafe; }
.sar-cert-img { width:36px; height:36px; flex-shrink:0; }
.sar-cert-info { font-size:12px; line-height:1.45; min-width:0; }
.sar-cert-cn { font-weight:600; color:#0f172a; word-break:break-word; }
.sar-cert-validity { color:#475569; }
.sar-cert-issuer { color:#64748b; }
/* Action buttons row */
#dialog_ .sar-cert-actions { margin-top:0!important; display:flex!important; gap:0.5rem!important; }
#dialog_ .sar-cert-actions .ui-button { flex:1!important; width:auto!important; min-width:0!important; }
/* ---- Login loading spinner ---- */
.sar-login-loading { flex-direction:column; align-items:center; justify-content:center; gap:0.85rem; padding:1.5rem 0; }
.sar-login-spinner-ring { width:48px; height:48px; border:4px solid var(--sar-slate-200); border-top-color:var(--sar-primary); border-radius:50%; animation:sar-login-spin 0.75s linear infinite; }
.sar-login-loading-text { margin:0; font-size:13px; color:var(--sar-slate-500); font-weight:500; letter-spacing:0.02em; }
@keyframes sar-login-spin { to { transform:rotate(360deg); } }
@keyframes sar-cert-reveal { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.sar-cert-appear { animation:sar-cert-reveal 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes sar-login-fadeout { from { opacity:1; } to { opacity:0; transform:scale(0.97); } }
.sar-fade-out { animation:sar-login-fadeout 0.2s ease forwards; pointer-events:none; }

/* ======================================================
   RESPONSIVE
   ====================================================== */
/* Hamburger hidden on desktop; shown only on mobile */
.sar-hamburger { display:none !important; }

/* ======================================================
   PHASE 6 — CERTIFICATE VIEW & SUPERVISOR VIEW
   ====================================================== */
.contentMasterEmissao { box-sizing:border-box; width:100%; }

/* Main data card — overrides inline style, legacy tam* widths and margin35L */
.dialog680Maquinas { background:white!important; border-radius:12px!important; border:1px solid var(--sar-slate-200)!important; box-shadow:0 1px 4px rgba(0,0,0,0.06)!important; overflow:hidden!important; margin:0 0 0.75rem 0!important; width:auto!important; max-width:100%!important; float:none!important; }
.dialog680Maquinas #divContentData { width:auto!important; }

/* Data rows: flex label | value */
.detalheDescricao { display:flex!important; align-items:baseline!important; gap:0!important; padding:0.45rem 1.25rem!important; border-bottom:1px solid var(--sar-slate-100)!important; width:auto!important; box-sizing:border-box!important; float:none!important; clear:none!important; }
.detalheDescricao.colorF { background:#f8fafc!important; }
/* Label */
.spa_add { display:inline!important; flex-shrink:0!important; width:195px!important; min-width:195px!important; font-size:11px!important; font-weight:600!important; text-transform:uppercase!important; letter-spacing:0.04em!important; color:var(--sar-slate-400)!important; padding-right:0.75rem!important; box-sizing:border-box!important; float:none!important; line-height:1.6!important; }
/* Value */
.spa_addDados { display:inline!important; flex:1!important; font-size:13px!important; color:var(--sar-slate-700)!important; float:none!important; line-height:1.6!important; word-break:break-word!important; font-weight:normal!important; }
/* Winlogon monospace value */
.spa_fontlogon { font-family:monospace!important; font-size:12px!important; color:var(--sar-slate-600)!important; }

/* Button bar — supervisorView uses .boxButtons, certificateView uses loose floats inside .dialog680Maquinas */
.boxButtons { display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:0.5rem!important; padding:0.875rem 1.25rem!important; background:white!important; border-radius:12px!important; border:1px solid var(--sar-slate-200)!important; box-shadow:0 1px 4px rgba(0,0,0,0.04)!important; margin-top:0.75rem!important; clear:both!important; }
.boxButtons .ui-button { float:none!important; margin:0!important; flex-shrink:0!important; height:34px!important; width:auto!important; }
.boxButtons .esquerda.ui-button,.boxButtons .esquerda { float:none!important; }
.boxButtons .direita.ui-button,.boxButtons .direita { float:none!important; margin-left:auto!important; }
.boxButtons .espacamento20,.boxButtons .espacamento20.clear { display:none!important; }

/* New button variants */
.btn_atribuir,.btn_Reimprimir,.btn_Cancelartrilha,.btn_master2 {
  display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 14px;
  border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background-color 0.18s; white-space:nowrap; box-sizing:border-box; vertical-align:top;
}
.btn_atribuir { background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; }
.btn_atribuir:hover,.btn_atribuir.ui-button:hover { background:#e2e8f0!important; }
.btn_Reimprimir { background:#f59e0b; color:#fff; border:none; }
.btn_Reimprimir:hover,.btn_Reimprimir.ui-button:hover { background:#d97706!important; }
.btn_Cancelartrilha { background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; }
.btn_Cancelartrilha:hover,.btn_Cancelartrilha.ui-button:hover { background:#bae6fd!important; }
.btn_master2 { background:#475569; color:#fff; border:none; }
.btn_master2:hover,.btn_master2.ui-button:hover { background:#334155!important; }
/* PrimeFaces ui-button overrides */
.btn_atribuir.ui-button { background:#f1f5f9!important; color:#334155!important; border:1px solid #cbd5e1!important; height:34px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_atribuir.ui-button .ui-button-text { color:#334155!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_Reimprimir.ui-button { background:#f59e0b!important; color:#fff!important; border:none!important; height:34px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_Reimprimir.ui-button .ui-button-text { color:#fff!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_Cancelartrilha.ui-button { background:#e0f2fe!important; color:#0369a1!important; border:1px solid #bae6fd!important; height:34px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_Cancelartrilha.ui-button .ui-button-text { color:#0369a1!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
.btn_master2.ui-button { background:#475569!important; color:#fff!important; border:none!important; height:34px!important; padding:0 14px!important; border-radius:6px!important; box-shadow:none!important; display:inline-flex!important; align-items:center!important; gap:0.35rem!important; }
.btn_master2.ui-button .ui-button-text { color:#fff!important; font-size:12px!important; font-weight:600!important; padding:0!important; }
/* Reset PrimeFaces absolute icon positioning so flex gap handles spacing.
   Text+icon buttons use ui-button-icon-left (not ui-button-icon), so both are targeted. */
.btn_atribuir.ui-button .ui-button-icon, .btn_atribuir.ui-button .ui-button-icon-left,
.btn_Reimprimir.ui-button .ui-button-icon, .btn_Reimprimir.ui-button .ui-button-icon-left,
.btn_Cancelartrilha.ui-button .ui-button-icon, .btn_Cancelartrilha.ui-button .ui-button-icon-left,
.btn_master2.ui-button .ui-button-icon, .btn_master2.ui-button .ui-button-icon-left,
.btn_Cancelar.ui-button .ui-button-icon, .btn_Cancelar.ui-button .ui-button-icon-left,
.btn_cancel.ui-button .ui-button-icon, .btn_cancel.ui-button .ui-button-icon-left { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; line-height:1!important; }
.btn_atribuir.ui-button .ui-icon-loading, .btn_Reimprimir.ui-button .ui-icon-loading,
.btn_Cancelartrilha.ui-button .ui-icon-loading, .btn_master2.ui-button .ui-icon-loading { position:relative!important; left:auto!important; top:auto!important; margin:0!important; font-size:13px!important; }

@media (max-width: 768px) {
  .sar-hamburger { display:inline-flex !important; }
  .sar-topbar-nav { display:none !important; }
  .sar-login-left { display:none; }
  .sar-login-right { margin-left:0!important; padding:1.5rem; }
  .sar-login-form { max-width:100%; }
  .sar-content { padding:0.75rem 0.5rem; }
  .sar-header-user { flex-direction:column; gap:2px; }
  .tam935,.tam700,.tam480,.tam390,.tam290,.tam220,.tam120,
  .boxInputsEsquerda,.boxInputsDireita,.boxInputsListworkEsquerda { width:100%!important; max-width:100%!important; }
  .esquerda,.direita { float:none!important; display:block!important; }
  ul.etapasValidacao { flex-wrap:wrap; }
  ul.etapasValidacao li { flex:0 0 50%; }
}

/* ======================================================
   BIOMETRY MODAL — hand/finger sprites + modal layout
   Images served by deployed common-static-web context.
   Classes ported from CssBasicoDefault.less; finger
   offsets are exact copies of the original LESS source.
   ====================================================== */

/* Hand background sprites */
.handL150 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/hands150.png') no-repeat 0px; display:block; }
.handR150 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/hands150.png') no-repeat -150px; display:block; }

/* Finger capture overlay hit-areas (position:relative over hand background) */
.rightThumbCaptured        { width:30px; height:39px; left:0px;   top:90px;   position:relative; }
.rightIndexFingerCaptured  { width:29px; height:45px; left:23px;  top:-25px;  position:relative; }
.rightMiddleFingerCaptured { width:24px; height:52px; left:62px;  top:-89px;  position:relative; }
.rightRingFingerCaptured   { width:27px; height:50px; left:101px; top:-128px; position:relative; }
.rightPinkyFingerCaptured  { width:27px; height:39px; left:128px; top:-141px; position:relative; }
.leftThumbCaptured         { width:30px; height:39px; left:120px; top:-88px;  position:relative; }
.leftIndexFingerCaptured   { width:25px; height:39px; left:102px; top:-119px; position:relative; }
.leftMiddleFingerCaptured  { width:20px; height:48px; left:67px;  top:-87px;  position:relative; }
.leftRingFingerCaptured    { width:27px; height:43px; left:26px;  top:-27px;  position:relative; }
.leftPinkyFingerCaptured   { width:27px; height:39px; left:0px;   top:38px;   position:relative; }

/* Finger highlight sprites — JS adds e.g. class="index5" when finger is captured */
.index4  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -150px -91px; }
.index5  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -173px -18px; }
.index6  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -212px   5px; }
.index7  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -100px -11px; }
.index8  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -278px -46px; }
.index9  { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -120px -82px; }
.index10 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat -100px -18px; }
.index11 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat  -67px   5px; }
.index12 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat  -25px -15px; }
.index13 { background:url('/common-static-web/static/css/themes/SkinDynamic/images/fingers150.png') no-repeat    0px -40px; }

/* Status indicator — animated GIF per state, elegant card with state-colored border */
.sar-bio-status {
  width:130px; height:130px; flex-shrink:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:12px; background-color:white;
  border:2px solid var(--sar-slate-200);
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
  transition:border-color 0.35s ease, box-shadow 0.35s ease;
}
.sar-bio-status.boxBiometryColect        { background-image:url('/common-static-web/static/css/themes/SkinDynamic/images/validandoBiometriaeC.gif');          border-color:#bfdbfe; box-shadow:0 2px 14px rgba(2,132,199,0.18); }
.sar-bio-status.boxBiometryColectValid   { background-image:url('/common-static-web/static/css/themes/SkinDynamic/images/validandoBiometria.gif');            border-color:#6ee7b7; box-shadow:0 2px 14px rgba(16,185,129,0.22); }
.sar-bio-status.boxBiometryColectValiderror   { background-image:url('/common-static-web/static/css/themes/SkinDynamic/images/validandoBiometriaeErro.gif');    border-color:#fca5a5; box-shadow:0 2px 14px rgba(239,68,68,0.18); }
.sar-bio-status.boxBiometryColectValidWarning { background-image:url('/common-static-web/static/css/themes/SkinDynamic/images/validandoBiometriaeWarning.gif'); border-color:#fcd34d; box-shadow:0 2px 14px rgba(245,158,11,0.18); }

/* Status input field color states set by JS */
input.inp_addBios          { border-color:#7BCA7B!important; background:#B2E0B2!important; font-weight:600; }
input.inp_addBiosErro      { border-color:#E37777!important; background:#F2BDBD!important; color:#CC0000!important; font-weight:600; }
input.inp_addBiosErroColeta    { border-color:#E37777!important; color:#CC0000!important; font-weight:600; }
input.inp_addBiosWarningColeta { border-color:#FFA500!important; background:#FFFFA6!important; color:rgba(255,119,0,1)!important; font-weight:600; }

/* Digital signature waiting modal */
.boxSignature { background:url('/common-static-web/static/css/themes/SkinDynamic/images/loading_signature.gif') no-repeat center center; }

/* Modal interior layout */
.sar-bio-body { display:flex; align-items:flex-start; gap:1.25rem; padding:1rem 1rem 0.75rem; }
.sar-bio-hands-panel { flex:1; min-width:0; }
.sar-bio-section-header { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--sar-slate-500); margin-bottom:0.6rem; padding-bottom:0.35rem; border-bottom:1px solid var(--sar-slate-200); }
.sar-bio-hands-row { display:flex; gap:0.5rem; align-items:flex-start; }
.sar-bio-hand-col { display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
.sar-bio-hand-label { font-size:11px; font-weight:600; color:var(--sar-slate-500); text-align:center; }
.sar-bio-hand { flex-shrink:0; height:170px!important; overflow:visible; }
.sar-bio-info { padding:0.75rem 1rem 1rem; display:flex; flex-direction:column; gap:0.5rem; border-top:1px solid var(--sar-slate-200); }
.sar-bio-info-row { display:flex; flex-direction:column; gap:2px; }
.sar-bio-info-row .inp_add { width:100%!important; box-sizing:border-box!important; }

/* ======================================================
   LIGHTBOX / MODAL-LINK (SAF/BLACKLIST, RG iframe modals)
   ====================================================== */

/* SAF/RG iframe dialogs — iframe fills content area with no gap or scrollbars.
   Use compound selector (.sar-iframe-dialog.ui-dialog) to beat the global
   .ui-dialog .ui-dialog-content rule that adds padding:1.5rem and overflow-y:auto. */
.sar-iframe-dialog.ui-dialog .ui-dialog-content,
.sar-iframe-dialog.ui-dialog .ui-dialog-content.ui-widget-content {
    padding:0!important; margin:0!important;
    overflow:hidden!important;
    height:82vh!important;
}
.sar-iframe-dialog .ui-dialog-content iframe {
    width:100%!important; height:100%!important;
    border:none!important; display:block!important; margin:0!important;
}

/* Strip PrimeFaces panel chrome from the lightBox wrapper */
.lightBox.ui-panel { background:transparent!important; border:none!important; box-shadow:none!important;
  display:inline-block!important; vertical-align:middle!important; padding:0!important; }
.lightBox.ui-panel .ui-panel-titlebar { display:none!important; }
.lightBox.ui-panel .ui-panel-content  { padding:0!important; }

/* The anchor inside lightBox styled as a primary button */
.lightBox a,
.lightBox span {
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 14px; min-width:118px;
  background:var(--primary-color); color:var(--primary-color-text);
  border:1px solid var(--primary-color); border-radius:6px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background 0.18s, border-color 0.18s; box-sizing:border-box;
}
.lightBox a:hover, .lightBox span:hover {
  background:#0369a1!important; border-color:#0369a1!important; color:white!important;
  text-decoration:none;
}

/* ======================================================
   SPARKLING-MODAL — matches the PrimeFaces dialog style used in this theme
   ====================================================== */

.sparkling-modal-container {
  position:fixed!important; inset:0!important;
  z-index:10000!important; pointer-events:none!important;
}

.sparkling-modal-overlay {
  position:fixed!important; inset:0!important;
  background:rgba(15,23,42,0.6)!important;
  backdrop-filter:blur(2px)!important;
  pointer-events:auto!important;
}

div.sparkling-modal-frame,
.sparkling-modal-frame {
  position:fixed!important;
  top:50%!important; left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(94vw,1300px)!important; height:88vh!important; margin:0!important;
  background:#fff!important;
  border:none!important; border-radius:8px!important; overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(255,255,255,0.10), 0 12px 48px rgba(0,0,0,0.32), 0 4px 16px rgba(0,0,0,0.16)!important;
  z-index:10010!important; pointer-events:auto!important;
  display:flex!important; flex-direction:column!important;
}

/* Title bar — identical to .ui-dialog .ui-dialog-titlebar */
.sparkling-modal-title {
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%)!important;
  padding:0.55rem 0.875rem 0.55rem 1.125rem!important;
  flex-shrink:0!important;
  display:flex!important; align-items:center!important;
  border-bottom:1px solid rgba(255,255,255,0.07)!important;
  position:relative!important;
}

/* Title text — identical to .ui-dialog .ui-dialog-title */
.sparkling-modal-title > span {
  font-size:13px!important; font-weight:600!important;
  color:rgba(255,255,255,0.95)!important;
  padding:0!important; float:none!important;
  flex:1!important; overflow:hidden!important;
  text-overflow:ellipsis!important; white-space:nowrap!important;
}

/* Close button — identical to .ui-dialog .ui-dialog-titlebar-close */
.sparkling-modal-close {
  position:absolute!important; right:0.875rem!important; top:50%!important;
  transform:translateY(-50%)!important;
  width:26px!important; height:26px!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  border-radius:50%!important; cursor:pointer!important;
  transition:background 0.15s, border-color 0.15s!important;
}
.sparkling-modal-close:hover {
  background:rgba(255,255,255,0.2)!important;
  border-color:rgba(255,255,255,0.32)!important;
}
/* PrimeIcon × via ::after — matches .ui-dialog-titlebar-close::after */
.sparkling-modal-close::after {
  content:'\e90b'!important; font-family:'primeicons'!important;
  font-size:12px!important; color:rgba(255,255,255,0.85)!important;
}
/* Hide the jQuery-generated CSS-cross divs */
.i-close { display:none!important; }

/* Content fills remaining height, iframe fills content */
.sparkling-modal-content {
  padding:0!important; flex:1!important; overflow:hidden!important;
}
.sparkling-modal-content iframe {
  width:100%!important; height:100%!important;
  border:none!important; display:block!important;
}

/* ====================== Tutorial de Instalação dialog ====================== */
.sar-tutorial-panel { background:var(--sar-slate-50)!important; border:none!important; box-shadow:none!important; padding:0!important; }
.sar-tutorial-panel > .ui-panel-content { padding:1.25rem!important; }

.sar-tutorial-steps { display:flex; gap:1rem; margin-bottom:1.25rem; }
.sar-tutorial-card { flex:1; background:white; border:1px solid var(--sar-slate-200); border-radius:var(--sar-radius-lg); overflow:hidden; box-shadow:var(--sar-shadow); display:flex; flex-direction:column; }
.sar-tutorial-card-header { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 1rem; background:linear-gradient(135deg,#eff6ff,#dbeafe); border-bottom:1px solid #bfdbfe; }
.sar-tutorial-card-header--2 { background:linear-gradient(135deg,#f5f3ff,#ede9fe)!important; border-bottom-color:#ddd6fe!important; }
.sar-tutorial-num { width:28px; height:28px; border-radius:50%; background:var(--sar-primary); color:white; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sar-tutorial-num--2 { background:#7c3aed!important; }
.sar-tutorial-card-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--sar-slate-700); }
.sar-tutorial-card-body { padding:1rem; display:flex; align-items:center; justify-content:center; flex:1; background:white; }
.sar-tutorial-img { max-width:100%; height:auto; max-height:160px; object-fit:contain; }

.sar-tutorial-provider { background:white; border:1px solid var(--sar-slate-200); border-left:3px solid var(--sar-primary); border-radius:0 var(--sar-radius) var(--sar-radius) 0; padding:0.75rem 1rem; margin-bottom:1rem; }
.sar-tutorial-provider-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--sar-slate-500); display:flex; align-items:center; gap:0.4rem; margin-bottom:0.5rem; }
.sar-tutorial-provider-row { display:flex; align-items:center; gap:0.75rem; }
.sar-tutorial-provider-icon { height:24px; width:auto; flex-shrink:0; }
.sar-tutorial-provider-name { font-size:13px; color:var(--sar-slate-800); font-weight:500; }
.sar-tutorial-footer { display:flex; justify-content:flex-end; padding-top:0.25rem; }

/* ====================== Certificate install dialog (dlgGenerate) ====================== */
.sar-install-panel { background:var(--sar-slate-50)!important; border:none!important; box-shadow:none!important; padding:0!important; position:relative!important; }
.sar-install-panel > .ui-panel-content { padding:1.25rem!important; position:relative!important; }

/* Header: cert type + 2-step indicator */
.sar-install-header { background:white; border:1px solid var(--sar-slate-200); border-left:3px solid var(--sar-primary); border-radius:0 var(--sar-radius) var(--sar-radius) 0; padding:0.75rem 1rem; margin-bottom:1rem; }
.sar-install-certtype { margin-bottom:0.6rem; }
.sar-install-type-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--sar-slate-500); display:block; margin-bottom:0.2rem; }
.sar-install-product { font-size:13px; font-weight:600; color:var(--sar-slate-800); }

/* 2-dot step connector */
.sar-install-steps { display:flex; align-items:center; gap:0; }
.sar-install-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sar-install-dot { width:12px; height:12px; border-radius:50%; background:var(--sar-slate-300); border:2px solid var(--sar-slate-300); flex-shrink:0; transition:all 0.2s; }
.sar-install-step--active .sar-install-dot { background:var(--sar-primary); border-color:var(--sar-primary); box-shadow:0 0 0 3px rgba(2,132,199,0.2); }
.sar-install-step--done .sar-install-dot { background:var(--sar-success); border-color:var(--sar-success); }
.sar-install-step-lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--sar-slate-500); white-space:nowrap; }
.sar-install-step--active .sar-install-step-lbl { color:var(--sar-primary); font-weight:700; }
.sar-install-step--done .sar-install-step-lbl { color:var(--sar-success); }
.sar-install-connector { flex:1; height:2px; background:var(--sar-slate-300); margin:0 0.5rem; margin-bottom:14px; min-width:2rem; }
.sar-install-connector--done { background:var(--sar-success); }

/* Tutorial image card */
.sar-install-img-area { background:white; border:1px solid var(--sar-slate-200); border-radius:var(--sar-radius-lg); padding:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; min-height:140px; }
.sar-install-img { max-width:100%; max-height:200px; object-fit:contain; }

/* Provider section */
.sar-install-provider { background:white; border:1px solid var(--sar-slate-200); border-left:3px solid var(--sar-primary); border-radius:0 var(--sar-radius) var(--sar-radius) 0; padding:0.65rem 1rem; margin-bottom:1rem; }
.sar-install-provider-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--sar-slate-500); display:flex; align-items:center; gap:0.4rem; margin-bottom:0.4rem; }
.sar-install-provider-row { display:flex; align-items:center; gap:0.75rem; }
.sar-install-provider-icon { height:24px; width:auto; flex-shrink:0; }
.sar-install-provider-name { font-size:13px; color:var(--sar-slate-800); font-weight:500; }

/* Footer action bar */
.sar-install-footer { display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; padding-top:0.25rem; }
.sar-install-status { font-size:13px; font-weight:500; }

/* Loading overlay — JS sets outer div to display:block; inner wrapper stays flex for centering */
.sar-install-overlay { position:absolute; inset:0; background:rgba(248,250,252,0.97); border-radius:var(--sar-radius); z-index:10; }
.sar-install-overlay-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; gap:1rem; padding:1.5rem; box-sizing:border-box; }
.sar-install-loading-card { display:flex; flex-direction:column; align-items:center; gap:0.75rem; background:white; border:1px solid var(--sar-slate-200); border-radius:var(--sar-radius-lg); padding:1.5rem 2.5rem; box-shadow:var(--sar-shadow); text-align:center; min-width:260px; }
.sar-install-spinner { font-size:2.5rem; color:var(--sar-primary); }
.sar-install-overlay-msg,.sar-install-loading-label { font-size:14px; font-weight:600; color:var(--sar-slate-700); }
.sar-install-status-list { display:flex; flex-direction:column; gap:0.5rem; width:100%; max-width:380px; }
.sar-install-status-item { padding:0.6rem 1rem; border-radius:var(--sar-radius); }
.sar-install-status-row { display:flex; align-items:center; gap:0.5rem; font-size:13px; font-weight:500; }
.sar-install-status-row i { font-size:1rem; flex-shrink:0; }
.sar-install-ok  { background:#f0fdf4!important; color:#15803d!important; border:1px solid #86efac!important; }
.sar-install-err { background:#fef2f2!important; color:#dc2626!important; border:1px solid #fca5a5!important; }
.sar-install-progress-wrap { width:260px; height:6px; background:var(--sar-slate-200); border-radius:3px; overflow:hidden; margin-top:0.5rem; }
.sar-install-progress-bar { height:100%; background:var(--sar-primary); border-radius:3px; width:0; }

/* ======================================================
   ALLOCATION DIALOG (detailsAllocation / id_dialog_Allocation)
   ====================================================== */
.sar-alloc-form { display:flex; flex-direction:column; gap:1rem; }
.sar-alloc-field { display:flex; flex-direction:column; gap:0.35rem; }
.sar-alloc-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--sar-slate-500); }
.sar-alloc-select { width:100%!important; box-sizing:border-box!important; height:auto!important; }
.sar-alloc-footer { display:flex; justify-content:flex-end; gap:0.5rem; padding-top:1rem; border-top:1px solid var(--sar-slate-200); margin-top:0.25rem; }
.sar-alloc-footer .btn_master,
.sar-alloc-footer .btn_Cancelar { float:none!important; margin:0!important; }

/* ======================================================
   VALIDATE REQUEST REVAMP — two-column layout, sidebar,
   status cards, collapsible sections
   ====================================================== */

/* ── Main layout wrapper ─────────────────────────────── */
.sar-validate-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.sar-validate-form {
  flex: 1 1 0;
  min-width: 0;
}

.sar-validate-sidebar {
  flex: 0 0 265px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 68px; /* below sticky navbar */
}

.sar-v-divider {
  width: 1px;
  background: var(--sar-border);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── Form row helpers ────────────────────────────────── */
.sar-form-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sar-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Camera icon trailing inside an input */
.sar-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.sar-input-trail-btn {
  position: absolute !important;
  right: 3px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--sar-slate-500) !important;
  padding: 0 0.25rem !important;
  min-width: auto !important;
  height: 24px !important;
  width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
}

.sar-input-trail-btn:hover {
  color: var(--sar-primary) !important;
  background: var(--sar-slate-100) !important;
}
a.sar-input-trail-btn, a.sar-input-trail-btn:link, a.sar-input-trail-btn:visited {
  text-decoration: none !important;
  color: var(--sar-slate-500) !important;
  font-size: 13px !important;
}
a.sar-input-trail-btn:hover { color: var(--sar-primary) !important; }

/* Voter fields compact row */
.sar-voter-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.sar-voter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sar-voter-field .lab_add,
.sar-voter-field label {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Photo card ──────────────────────────────────────── */
.sar-photo-card {
  background: var(--sar-slate-50);
  border: 1px dashed var(--sar-slate-300);
  border-radius: var(--sar-radius);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  padding: 0.75rem;
}

.sar-photo-card img {
  width: 100%;
  max-width: 220px;
  border-radius: var(--sar-radius);
  object-fit: cover;
  border: 1px solid var(--sar-border);
}

.sar-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--sar-slate-400);
}

.sar-photo-placeholder i {
  font-size: 2rem;
}

.sar-photo-placeholder span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sar-slate-400);
}

.sar-photo-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
}

.sar-photo-replace-btn {
  margin-top: 0.4rem;
}

/* ── Sidebar Produto/Ticket info card ────────────────── */
.sar-sidebar-info-card {
  background: white;
  border: 1px solid var(--sar-border);
  border-radius: var(--sar-radius);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: var(--sar-shadow);
}
.sar-sidebar-info-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.sar-sidebar-info-icon {
  font-size: 12px;
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sar-sidebar-info-icon.produto { background: rgba(234,88,12,.12); color: #ea580c; }
.sar-sidebar-info-icon.ticket  { background: rgba(37,99,235,.12);  color: #2563eb; }
.sar-sidebar-info-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sar-sidebar-info-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sar-slate-500); line-height: 1.2;
}
.sar-sidebar-info-value {
  font-size: 11px; font-weight: 600;
  color: var(--sar-slate-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.35;
}

/* ── Validation status cards ─────────────────────────── */
.sar-status-card {
  background: white;
  border: 1px solid var(--sar-border);
  border-radius: var(--sar-radius);
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--sar-shadow);
}

.sar-status-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.sar-status-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sar-slate-700);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sar-status-card-title i {
  font-size: 13px;
}

.sar-status-pill {
  font-size: 9px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.sar-status-pill.pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.sar-status-pill.done {
  background: #d1fae5;
  color: #059669;
  border: 1px solid #6ee7b7;
}

.sar-status-pill.required {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.sar-status-pill.na {
  background: var(--sar-slate-100);
  color: var(--sar-slate-500);
  border: 1px solid var(--sar-slate-200);
}

.sar-status-card .btn_master,
.sar-status-card .btn_Cancelar {
  width: 100%;
  justify-content: center;
  font-size: 11px!important;
  height: 28px!important;
}

/* ── Collapsible / expandable sections ───────────────── */
.sar-collapsible-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  margin-bottom: 0.1rem;
  cursor: pointer;
}

.sar-collapsible-trigger input[type="checkbox"] {
  display: none;
}

.sar-expand-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sar-primary);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--sar-radius);
  border: 1px dashed var(--sar-primary-light);
  background: var(--sar-primary-light);
  transition: background var(--sar-transition), border-color var(--sar-transition);
  user-select: none;
}

.sar-expand-label:hover {
  background: #bae6fd;
  border-color: #7dd3fc;
}

.sar-expand-label i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.sar-collapsible-trigger input[type="checkbox"]:checked + .sar-expand-label i.pi-plus-circle {
  transform: rotate(45deg);
}

.sar-collapsible-content {
  padding: 0.6rem 0 0.5rem 0.5rem;
  border-left: 2px solid var(--sar-slate-200);
  margin-left: 0.5rem;
  margin-bottom: 0.75rem;
  animation: sar-fadein 0.18s ease;
}

/* ── Campos Especiais trigger button ─────────────────── */
.sar-campos-especiais-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--sar-slate-300);
  border-radius: var(--sar-radius);
  background: var(--sar-slate-50);
  color: var(--sar-slate-700);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--sar-transition), border-color var(--sar-transition);
  margin-top: 0.5rem;
}

.sar-campos-especiais-btn:hover {
  background: var(--sar-slate-100);
  border-color: var(--sar-slate-400);
}

/* ── Section group header within form ────────────────── */
.sar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sar-slate-500);
  padding: 0.5rem 0 0.25rem 0;
  border-bottom: 1px solid var(--sar-border);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Action bar separator ─────────────────────────────── */
.sar-action-bar-sep {
  border-top: 1px solid var(--sar-border);
  padding-top: 1rem;
  margin-top: 1.5rem;
}