/**
 * Pacto Design System v1.2
 * Single source of truth — CSS oficial do painel admin GM Pacto.
 *
 * Estrutura v1.2:
 *  Camada 1. Tokens canônicos e aliases compatíveis
 *  Camada 2. Primitivos oficiais (base, botões, inputs, cards, feedback)
 *  Camada 3. Padrões oficiais (topbar, layout, sidebar, CRUD, action bar)
 *  Camada 4. Extensões úteis preservadas da implementação real
 *  Camada 5. Primitives v1.2 para modal, histórico e specs pendentes
 */

/* ========== 1. TOKENS ========== */

:root[data-theme="light"]{
  /* Tokens canônicos do master */
  --pacto-color-primary:#13314D;
  --pacto-color-primary-hover:#1F4061;
  --pacto-color-accent:#0570DE;
  --pacto-color-accent-hover:#0258B8;

  --pacto-color-bg:#EEF2F7;
  --pacto-color-surface:#FFFFFF;
  --pacto-color-surface-alt:#F6F9FC;

  --pacto-color-border:#DDE3EC;
  --pacto-color-border-strong:#B8C2CE;

  --pacto-color-text:#0A2540;
  --pacto-color-text-muted:#3D4B5C;
  --pacto-color-text-subtle:#5A6776;

  --pacto-color-success:#00875A;
  --pacto-color-warning:#B85C00;
  --pacto-color-danger:#DE350B;

  --pacto-tint-accent-hover:rgba(5,112,222,.07);
  --pacto-tint-accent-active:rgba(5,112,222,.12);

  --pacto-shadow-sm:0 1px 2px rgba(10,37,64,.05);
  --pacto-shadow-md:0 2px 6px rgba(10,37,64,.08);
  --pacto-shadow-lg:0 8px 24px rgba(10,37,64,.10);
  --pacto-shadow-xl:0 16px 40px rgba(10,37,64,.18);

  /* Extensões úteis preservadas e formalizadas */
  --pacto-tint-success:rgba(0,135,90,.10);
  --pacto-tint-warning:rgba(184,92,0,.10);
  --pacto-tint-danger:rgba(222,53,11,.10);
  --pacto-overlay-backdrop:rgba(10,37,64,.46);

  /* Geometria e motion v1.2 */
  --pacto-space-1:4px;
  --pacto-space-2:8px;
  --pacto-space-3:12px;
  --pacto-space-4:16px;
  --pacto-space-5:24px;
  --pacto-space-6:32px;
  --pacto-space-7:40px;

  --pacto-radius-sm:4px;
  --pacto-radius-md:6px;
  --pacto-radius-lg:8px;
  --pacto-radius-pill:50px;

  --pacto-control-height:38px;
  --pacto-control-height-sm:32px;
  --pacto-control-height-icon:30px;
  --pacto-control-height-icon-header:34px;

  --pacto-transition-duration:200ms;
  --pacto-transition-duration-emphasis:300ms;
  --pacto-transition-ease:cubic-bezier(.16,1,.3,1);
  --pacto-transition-base:all var(--pacto-transition-duration) var(--pacto-transition-ease);
  --pacto-transition-color:
    color var(--pacto-transition-duration) var(--pacto-transition-ease),
    background var(--pacto-transition-duration) var(--pacto-transition-ease),
    border-color var(--pacto-transition-duration) var(--pacto-transition-ease),
    box-shadow var(--pacto-transition-duration) var(--pacto-transition-ease),
    transform var(--pacto-transition-duration) var(--pacto-transition-ease),
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease);
  --pacto-focus-ring:0 0 0 4px var(--pacto-tint-accent-hover);
  --pacto-motion-pulse:2s;

  /* Aliases legados para compatibilidade */
  --color-primary:var(--pacto-color-primary);
  --color-primary-hover:var(--pacto-color-primary-hover);
  --color-accent:var(--pacto-color-accent);
  --color-accent-hover:var(--pacto-color-accent-hover);

  --color-bg:var(--pacto-color-bg);
  --color-surface:var(--pacto-color-surface);
  --color-surface-alt:var(--pacto-color-surface-alt);

  --color-border:var(--pacto-color-border);
  --color-border-strong:var(--pacto-color-border-strong);

  --color-text:var(--pacto-color-text);
  --color-text-muted:var(--pacto-color-text-muted);
  --color-text-subtle:var(--pacto-color-text-subtle);

  --color-success:var(--pacto-color-success);
  --color-warning:var(--pacto-color-warning);
  --color-danger:var(--pacto-color-danger);

  --tint-accent-hover:var(--pacto-tint-accent-hover);
  --tint-accent-active:var(--pacto-tint-accent-active);
  --tint-success:var(--pacto-tint-success);
  --tint-warning:var(--pacto-tint-warning);
  --tint-danger:var(--pacto-tint-danger);

  --shadow-sm:var(--pacto-shadow-sm);
  --shadow-md:var(--pacto-shadow-md);
  --shadow-lg:var(--pacto-shadow-lg);
  --shadow-xl:var(--pacto-shadow-xl);
}

:root[data-theme="dark"]{
  --pacto-color-primary:#E6EBF1;
  --pacto-color-primary-hover:#FFFFFF;
  --pacto-color-accent:#4A9EFF;
  --pacto-color-accent-hover:#7AB8FF;

  --pacto-color-bg:#0E1620;
  --pacto-color-surface:#161F2C;
  --pacto-color-surface-alt:#1C2735;

  --pacto-color-border:#26323F;
  --pacto-color-border-strong:#3A4856;

  --pacto-color-text:#E6EBF1;
  --pacto-color-text-muted:#A7B2C0;
  --pacto-color-text-subtle:#7E8A99;

  --pacto-color-success:#3DDC97;
  --pacto-color-warning:#FFA952;
  --pacto-color-danger:#FF6B5B;

  --pacto-tint-accent-hover:rgba(74,158,255,.10);
  --pacto-tint-accent-active:rgba(74,158,255,.18);

  --pacto-shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --pacto-shadow-md:0 2px 6px rgba(0,0,0,.40);
  --pacto-shadow-lg:0 8px 24px rgba(0,0,0,.50);
  --pacto-shadow-xl:0 16px 40px rgba(0,0,0,.60);

  --pacto-tint-success:rgba(61,220,151,.12);
  --pacto-tint-warning:rgba(255,169,82,.12);
  --pacto-tint-danger:rgba(255,107,91,.12);
  --pacto-overlay-backdrop:rgba(14,22,32,.72);

  --pacto-space-1:4px;
  --pacto-space-2:8px;
  --pacto-space-3:12px;
  --pacto-space-4:16px;
  --pacto-space-5:24px;
  --pacto-space-6:32px;
  --pacto-space-7:40px;

  --pacto-radius-sm:4px;
  --pacto-radius-md:6px;
  --pacto-radius-lg:8px;
  --pacto-radius-pill:50px;

  --pacto-control-height:38px;
  --pacto-control-height-sm:32px;
  --pacto-control-height-icon:30px;
  --pacto-control-height-icon-header:34px;

  --pacto-transition-duration:200ms;
  --pacto-transition-duration-emphasis:300ms;
  --pacto-transition-ease:cubic-bezier(.16,1,.3,1);
  --pacto-transition-base:all var(--pacto-transition-duration) var(--pacto-transition-ease);
  --pacto-transition-color:
    color var(--pacto-transition-duration) var(--pacto-transition-ease),
    background var(--pacto-transition-duration) var(--pacto-transition-ease),
    border-color var(--pacto-transition-duration) var(--pacto-transition-ease),
    box-shadow var(--pacto-transition-duration) var(--pacto-transition-ease),
    transform var(--pacto-transition-duration) var(--pacto-transition-ease),
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease);
  --pacto-focus-ring:0 0 0 4px var(--pacto-tint-accent-hover);
  --pacto-motion-pulse:2s;

  --color-primary:var(--pacto-color-primary);
  --color-primary-hover:var(--pacto-color-primary-hover);
  --color-accent:var(--pacto-color-accent);
  --color-accent-hover:var(--pacto-color-accent-hover);

  --color-bg:var(--pacto-color-bg);
  --color-surface:var(--pacto-color-surface);
  --color-surface-alt:var(--pacto-color-surface-alt);

  --color-border:var(--pacto-color-border);
  --color-border-strong:var(--pacto-color-border-strong);

  --color-text:var(--pacto-color-text);
  --color-text-muted:var(--pacto-color-text-muted);
  --color-text-subtle:var(--pacto-color-text-subtle);

  --color-success:var(--pacto-color-success);
  --color-warning:var(--pacto-color-warning);
  --color-danger:var(--pacto-color-danger);

  --tint-accent-hover:var(--pacto-tint-accent-hover);
  --tint-accent-active:var(--pacto-tint-accent-active);
  --tint-success:var(--pacto-tint-success);
  --tint-warning:var(--pacto-tint-warning);
  --tint-danger:var(--pacto-tint-danger);

  --shadow-sm:var(--pacto-shadow-sm);
  --shadow-md:var(--pacto-shadow-md);
  --shadow-lg:var(--pacto-shadow-lg);
  --shadow-xl:var(--pacto-shadow-xl);
}

/* ========== 2. RESET E BASE ========== */

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  background:var(--color-bg);
  color:var(--color-text);
  transition:var(--pacto-transition-color);
  min-height:100vh;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}

input,select,textarea{
  font-family:inherit;
  font-size:14px;
}

a{
  color:inherit;
  text-decoration:none;
}

/* Focus ring oficial do master aplicado nos focáveis mais comuns */
:where(
  .theme-toggle,
  .sidebar-item,
  .btn,
  .btn-icon,
  .dropzone,
  .side-option,
  .switch,
  .toast-undo,
  .new-card,
  .star-btn,
  .ds-accordion-trigger,
  .ds-chip,
  .ds-page-btn,
  .ds-modal-close
):focus-visible{
  outline:none;
  box-shadow:var(--pacto-focus-ring);
}

/* Helper de acessibilidade para labels semânticos invisíveis */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ========== 3. TOPBAR ========== */

.topbar{
  height:56px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  display:flex;
  align-items:center;
  padding:0 24px;
  gap:16px;
  position:sticky;
  top:0;
  z-index:10;
}

.brand{display:flex;align-items:center;gap:var(--pacto-space-2)}

.brand-mark{
  width:32px;
  height:32px;
  border-radius:8px;
  background:var(--color-primary);
  color:var(--color-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
}
:root[data-theme="dark"] .brand-mark{background:var(--color-accent);color:#0E1620}

.brand-name{font-weight:600;font-size:15px;color:var(--color-text)}

.brand-tag{
  padding:4px 8px;
  border-radius:var(--pacto-radius-sm);
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  font-size:11px;
  color:var(--color-text-muted);
  font-weight:500;
  letter-spacing:.2px;
}

.topbar-center{flex:1;display:flex;justify-content:center}

.topbar-tab{
  padding:8px 16px;
  border-radius:var(--pacto-radius-md);
  background:var(--color-primary);
  color:var(--color-surface);
  font-size:13px;
  font-weight:500;
}
:root[data-theme="dark"] .topbar-tab{background:var(--color-accent);color:#0E1620}

.topbar-actions{display:flex;align-items:center;gap:var(--pacto-space-2)}

.theme-toggle{
  padding:8px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  font-size:12px;
  color:var(--color-text-muted);
  transition:var(--pacto-transition-color);
  background:var(--color-surface);
}
.theme-toggle:hover{background:var(--color-surface-alt);color:var(--color-text)}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--color-accent);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
}

/* ========== 4. LAYOUT ========== */

.shell{display:flex;min-height:calc(100vh - 56px)}

.page{flex:1;padding:32px 40px;padding-bottom:60px}

.page-title{
  font-size:26px;
  font-weight:600;
  color:var(--color-text);
  letter-spacing:-.3px;
}

.page-subtitle{
  font-size:14px;
  color:var(--color-text-subtle);
  margin-top:6px;
}

.layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
  margin-top:24px;
}

/* ========== 5. SIDEBAR ========== */

.sidebar{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:24px 0;
  box-shadow:var(--shadow-sm);
  height:fit-content;
}

.sidebar-section{padding:0 16px}
.sidebar-section + .sidebar-section{margin-top:16px}

.sidebar-label{
  font-size:11px;
  font-weight:600;
  color:var(--color-text-subtle);
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:8px;
  padding:0 12px;
}

.sidebar-item{
  display:block;
  padding:8px 12px;
  border-radius:var(--pacto-radius-md);
  font-size:13.5px;
  color:var(--color-text-muted);
  position:relative;
  transition:var(--pacto-transition-base);
  margin:0;
}
.sidebar-item:hover{background:var(--tint-accent-hover);color:var(--color-text)}
.sidebar-item.active{
  color:var(--color-accent);
  font-weight:600;
  background:linear-gradient(90deg,var(--tint-accent-active),var(--tint-accent-hover));
}
.sidebar-item.active::before{
  content:"";
  position:absolute;
  left:0;top:8px;bottom:8px;
  width:3px;
  background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));
  border-radius:0 3px 3px 0;
}

/* ========== 6. BUTTONS ========== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--pacto-control-height);
  padding:0 16px;
  border-radius:var(--pacto-radius-md);
  font-size:13px;
  font-weight:500;
  transition:var(--pacto-transition-base);
  border:1px solid transparent;
  cursor:pointer;
}
.btn:focus-visible{
  outline:none;
  box-shadow:var(--pacto-focus-ring);
}

.btn-primary{background:var(--color-primary);color:var(--color-surface)}
.btn-primary:hover{
  background:var(--color-primary-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
:root[data-theme="dark"] .btn-primary{background:var(--color-accent);color:#0E1620}
:root[data-theme="dark"] .btn-primary:hover{background:var(--color-accent-hover)}

.btn-ghost,
.btn-secondary{
  background:transparent;
  color:var(--color-text-muted);
  border-color:var(--color-border);
}
.btn-ghost:hover,
.btn-secondary:hover{background:var(--color-surface-alt);color:var(--color-text)}

.btn-danger{
  background:transparent;
  color:var(--color-danger);
  border-color:var(--color-border);
}
.btn-danger:hover{background:rgba(222,53,11,.08);border-color:var(--color-danger)}

.btn-sm{min-height:var(--pacto-control-height-sm);padding:0 12px;font-size:12px}

.btn-icon{
  width:var(--pacto-control-height-icon);
  height:var(--pacto-control-height-icon);
  min-height:var(--pacto-control-height-icon);
  padding:0;
  border-radius:var(--pacto-radius-md);
  color:var(--color-text-subtle);
  background:transparent;
  flex-shrink:0;
}
.btn-icon:hover{background:var(--tint-accent-hover);color:var(--color-accent)}
.btn-icon.danger:hover{background:rgba(222,53,11,.08);color:var(--color-danger)}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"],
.btn-icon:disabled,
.btn-icon.is-disabled,
.btn-icon[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

/* ========== 7. FORMS / INPUTS ========== */

.form-row{margin-bottom:24px}
.form-row:last-child{margin-bottom:0}

.form-label{
  font-size:11px;
  font-weight:600;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
  display:block;
}

.form-help{
  font-size:12px;
  color:var(--color-text-subtle);
  margin-top:8px;
  line-height:1.4;
}

.input-text{
  width:100%;
  height:var(--pacto-control-height);
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:14px;
  transition:var(--pacto-transition-color);
  outline:none;
  font-family:inherit;
}
.input-text:focus{
  border-color:var(--color-accent);
  box-shadow:var(--pacto-focus-ring);
}
.input-text::placeholder{color:var(--color-text-subtle)}

/* ========== 8. CARDS ========== */

.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.card-header{
  background:var(--color-surface-alt);
  padding:18px 24px;
  border-bottom:1px solid var(--color-border);
}

.card-title{font-size:18px;font-weight:600;color:var(--color-text)}
.card-desc{font-size:12.5px;color:var(--color-text-subtle);margin-top:4px}

.card-body{padding:24px}

.card.is-clickable,
.card.card-clickable,
.card[data-clickable="true"]{
  transition:var(--pacto-transition-base);
}
.card.is-clickable:hover,
.card.card-clickable:hover,
.card[data-clickable="true"]:hover{
  border-color:var(--color-border-strong);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

/* ========== 9. ACTION BAR STICKY ========== */

.action-bar{
  position:sticky;
  bottom:0;
  margin-top:24px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:var(--shadow-md);
}
:root[data-theme="dark"] .action-bar{background:rgba(22,31,44,.85)}

.action-bar-info{
  font-size:12px;
  color:var(--color-text-subtle);
  display:flex;
  align-items:center;
  gap:8px;
}

.action-bar-actions{display:flex;gap:12px;align-items:center}

.shortcuts-mini{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:11px;
  color:var(--color-text-subtle);
  margin-right:8px;
}

/* ========== 10. UTILITÁRIOS ========== */

.kbd{
  display:inline-block;
  padding:1px 6px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-bottom-width:2px;
  border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  color:var(--color-text-muted);
}

.dot-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-accent);
  animation:pulse 2s infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 var(--tint-accent-active)}
  50%{box-shadow:0 0 0 6px transparent}
}

/* ============================================================
 * Pacto DS · módulo Configuração Geral (F2.4.c.2)
 * Adicionado ao pacto-ds.css em 2026-04-13
 * ============================================================ */

/* Section header (grupo de cards) */
.section{margin-bottom:32px}
.section:last-child{margin-bottom:0}
.section-head{margin-bottom:12px}
.section-head h2{font-size:15px;font-weight:600;color:var(--color-text);letter-spacing:-.1px}
.section-head p{font-size:12.5px;color:var(--color-text-subtle);margin-top:4px}

/* Card de configuração horizontal */
.cfg-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:16px 20px;
  box-shadow:var(--shadow-sm);
  transition:var(--pacto-transition-base);
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}
.cfg-card:last-child{margin-bottom:0}
.cfg-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cfg-card.disabled{opacity:.62}
.cfg-card.disabled:hover{opacity:.85}
.cfg-card.simple{padding:18px 20px}

/* Ícone do card */
.cfg-icon{
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--color-surface-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-muted);
  flex-shrink:0;
  border:1px solid var(--color-border);
}
.cfg-card.on .cfg-icon{
  background:var(--tint-accent-active);
  color:var(--color-accent);
  border-color:transparent;
}

/* Info do card */
.cfg-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cfg-title{font-size:14px;font-weight:600;color:var(--color-text);letter-spacing:-.1px}
.cfg-desc{font-size:12.5px;color:var(--color-text-subtle);line-height:1.4}

/* Controles (input + select) */
.cfg-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}

.cfg-input{
  height:36px;
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:14px;
  transition:var(--pacto-transition-color);
  min-width:200px;
  outline:none;
  font-family:inherit;
}
.cfg-input:focus{
  border-color:var(--color-accent);
  box-shadow:var(--pacto-focus-ring);
}
.cfg-input::placeholder{color:var(--color-text-subtle)}
.cfg-input.with-prefix{padding-left:32px}

.input-wrap{position:relative}
.input-prefix{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--color-text-subtle);
  font-size:14px;
  font-weight:500;
  pointer-events:none;
}

.cfg-select{
  height:36px;
  padding:0 32px 0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6776' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  color:var(--color-text);
  font-size:14px;
  cursor:pointer;
  outline:none;
  transition:var(--pacto-transition-color);
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
}
:root[data-theme="dark"] .cfg-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E8A99' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
}
.cfg-select:focus{
  border-color:var(--color-accent);
  box-shadow:var(--pacto-focus-ring);
}

.cfg-card.disabled .cfg-input,
.cfg-card.disabled .cfg-select{opacity:.55;pointer-events:none}

/* Switch on/off */
.switch{
  position:relative;
  width:38px;
  height:22px;
  flex-shrink:0;
  cursor:pointer;
  background:var(--color-border-strong);
  border-radius:var(--pacto-radius-pill);
  transition:background var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.switch::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  background:var(--color-surface);
  border-radius:50%;
  transition:transform var(--pacto-transition-duration) var(--pacto-transition-ease);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch.on{background:var(--color-accent)}
.switch.on::after{transform:translateX(16px)}

/* ============================================================
 * Pacto DS · módulo Logo (F2.4.c.3)
 * ============================================================ */

/* Grid de 2 colunas */
.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.logo-grid .col{padding:24px}
.logo-grid .col + .col{border-left:1px solid var(--color-border)}

/* Dropzone */
.dropzone{
  display:block;
  border:2px dashed var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:32px 24px;
  text-align:center;
  transition:var(--pacto-transition-base);
  cursor:pointer;
  background:var(--color-surface-alt);
}
.dropzone:hover{
  border-color:var(--color-accent);
  background:var(--tint-accent-hover);
}
.dropzone.dragging{
  border-color:var(--color-accent);
  background:var(--tint-accent-active);
  transform:scale(1.01);
}
.dz-icon{
  width:48px;
  height:48px;
  border-radius:8px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  color:var(--color-accent);
}
.dz-title{font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:4px}
.dz-desc{font-size:12px;color:var(--color-text-subtle);line-height:1.5}
.dz-desc strong{color:var(--color-accent);font-weight:600}

/* Preview do arquivo atual */
.logo-preview{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius:8px;
}
.logo-thumb{
  width:64px;
  height:64px;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:var(--color-primary);
  font-weight:600;
  text-align:center;
  line-height:1.1;
  flex-shrink:0;
  padding:4px;
}
:root[data-theme="dark"] .logo-thumb{background:var(--color-surface)}
.logo-info{flex:1;min-width:0}
.logo-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--color-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.logo-meta{
  font-size:11.5px;
  color:var(--color-text-subtle);
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--color-text-subtle)}
.logo-actions{display:flex;gap:8px;flex-shrink:0}

/* Seletor de lado */
.side-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-option{
  border:1.5px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:16px;
  cursor:pointer;
  transition:var(--pacto-transition-base);
  background:var(--color-surface);
  position:relative;
}
.side-option:hover{
  border-color:var(--color-border-strong);
  background:var(--color-surface-alt);
}
.side-option.active{
  border-color:var(--color-accent);
  background:var(--tint-accent-hover);
  box-shadow:0 0 0 4px var(--tint-accent-hover);
}
.side-option.active::after{
  content:"✓";
  position:absolute;
  top:8px;
  right:10px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
}

/* Mini mockup de PDF */
.mini-pdf{
  height:60px;
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  border-radius:4px;
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:6px;
  margin-bottom:8px;
  position:relative;
  overflow:hidden;
}
.mini-pdf::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:18px;
  background:#0E3A5F;
  border-radius:4px 4px 0 0;
}
.mini-logo{
  width:18px;
  height:11px;
  background:#fff;
  border-radius:1px;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5px;
  color:#0E3A5F;
  font-weight:700;
  margin-top:-12px;
}
.mini-pdf.right{justify-content:flex-end}
.mini-pdf.right .mini-logo{margin-right:0}
.mini-pdf.left .mini-logo{margin-left:0}
.side-name{
  font-size:12px;
  font-weight:600;
  color:var(--color-text);
  text-align:center;
}

/* Slider */
.slider-row{display:flex;align-items:center;gap:16px}
.slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--color-border);
  border-radius:50px;
  outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  background:var(--color-accent);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider::-moz-range-thumb{
  width:18px;
  height:18px;
  background:var(--color-accent);
  border-radius:50%;
  cursor:pointer;
  border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.slider-value{
  font-size:14px;
  font-weight:600;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  background:var(--tint-accent-hover);
  padding:4px 12px;
  border-radius:var(--pacto-radius-md);
  min-width:64px;
  text-align:center;
}

/* ============================================================
 * Pacto DS · módulo Histórico (F2.4.c.4)
 * ============================================================ */

:root[data-theme="light"]{
  --tint-success:var(--pacto-tint-success);
  --tint-warning:var(--pacto-tint-warning);
  --tint-danger:var(--pacto-tint-danger);
}
:root[data-theme="dark"]{
  --tint-success:var(--pacto-tint-success);
  --tint-warning:var(--pacto-tint-warning);
  --tint-danger:var(--pacto-tint-danger);
}

/* Filter selects (na toolbar) */
.filter-select{
  height:38px;
  padding:0 32px 0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6776' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  color:var(--color-text);
  font-size:14px;
  cursor:pointer;
  outline:none;
  transition:var(--pacto-transition-color);
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
}
:root[data-theme="dark"] .filter-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E8A99' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
}
.filter-select:focus{
  border-color:var(--color-accent);
  box-shadow:var(--pacto-focus-ring);
}

/* Group header por data */
.group-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 8px;
  padding:0 4px;
}
.group-header:first-child{margin-top:0}
.group-label{
  font-size:11px;
  font-weight:600;
  color:var(--color-text-subtle);
  text-transform:uppercase;
  letter-spacing:.6px;
}
.group-line{flex:1;height:1px;background:var(--color-border)}

/* Card de entrada do histórico */
.hist-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:var(--pacto-transition-base);
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}
.hist-card:hover{
  border-color:var(--color-border-strong);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

/* Avatar do usuário */
.user-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:#fff;
  flex-shrink:0;
}
.user-avatar.gd{background:linear-gradient(135deg,#0570DE,#13314D)}
.user-avatar.cl{background:linear-gradient(135deg,#00875A,#0F6E56)}
.user-avatar.ja{background:linear-gradient(135deg,#B85C00,#D97706)}
.user-avatar.br{background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.user-avatar.vb{background:linear-gradient(135deg,#DC2626,#7F1D1D)}

/* Conteúdo principal */
.hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hist-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13.5px;
  color:var(--color-text);
  line-height:1.4;
}
.hist-user{font-weight:600;color:var(--color-text)}
.hist-target{color:var(--color-text-muted);font-weight:500}
.hist-where{color:var(--color-text-subtle);font-size:12.5px}

/* Pills de ação coloridas */
.hist-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:50px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.hist-action.insert{background:var(--tint-success);color:var(--color-success)}
.hist-action.update{background:var(--tint-accent-active);color:var(--color-accent)}
.hist-action.delete{background:var(--tint-danger);color:var(--color-danger)}
.hist-action.restore{background:var(--tint-warning);color:var(--color-warning)}

/* Diff antes → depois */
.hist-diff{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--color-text-subtle);
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  padding:6px 10px;
  border-radius:5px;
  margin-top:2px;
}
.diff-arrow{color:var(--color-text-subtle);flex-shrink:0;font-weight:600}
.diff-before{
  text-decoration:line-through;
  color:var(--color-text-subtle);
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.diff-after{
  color:var(--color-text);
  font-weight:500;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Timestamp */
.hist-time{
  font-size:11.5px;
  color:var(--color-text-subtle);
  text-align:right;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
.hist-time strong{
  display:block;
  color:var(--color-text-muted);
  font-weight:600;
}

/* ============================================================
 * Pacto DS · Toasts + transições (F2.5.1)
 * ============================================================ */

.toast-stack{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  pointer-events:none;
}

.toast-wrap{position:relative}

.toast{
  background:var(--color-text);
  color:var(--color-surface);
  padding:0;
  border-radius:var(--pacto-radius-lg);
  box-shadow:var(--shadow-xl);
  display:flex;
  align-items:center;
  gap:0;
  font-size:14px;
  font-weight:500;
  pointer-events:auto;
  animation:toastIn var(--pacto-transition-duration-emphasis) var(--pacto-transition-ease);
  min-width:320px;
  max-width:440px;
  overflow:hidden;
  border:1px solid var(--color-border);
}
:root[data-theme="dark"] .toast{
  background:var(--color-surface);
  color:var(--color-text);
  border-color:var(--color-border-strong);
}

.toast-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:44px;
  flex-shrink:0;
}

.toast-msg{
  flex:1;
  padding:12px 14px 12px 0;
  line-height:1.4;
}
.toast-msg strong{font-weight:600}

.toast-undo{
  padding:0 16px;
  height:44px;
  color:var(--color-accent);
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  border:none;
  border-left:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition:background var(--pacto-transition-duration) var(--pacto-transition-ease);
  background:transparent;
  flex-shrink:0;
}
:root[data-theme="dark"] .toast-undo{border-left-color:var(--color-border)}
.toast-undo:hover{background:rgba(74,158,255,.10)}

.toast-progress{
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  background:var(--color-accent);
  animation:toastBar linear forwards;
}

@keyframes toastIn{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastBar{
  from{width:100%}
  to{width:0%}
}

/* Empty state card */
.empty-state{
  padding:40px 24px;
  text-align:center;
  color:var(--color-text-subtle);
  font-size:14px;
  background:var(--color-surface);
  border:1px dashed var(--color-border);
  border-radius:var(--pacto-radius-lg);
}

/* ============================================================
 * Pacto DS · Estrela de padrão (F2.5.1.b — Títulos)
 * ============================================================ */

.star-btn{
  width:34px;
  height:34px;
  border-radius:6px;
  color:var(--color-text-subtle);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:var(--pacto-transition-base);
}
.star-btn:hover{
  background:var(--tint-accent-hover);
  color:var(--color-warning);
  transform:scale(1.1);
}
.star-btn.active{
  color:var(--color-warning);
  background:rgba(184,92,0,.08);
}
:root[data-theme="dark"] .star-btn.active{background:rgba(255,169,82,.12)}
.star-btn.active:hover{transform:none}

/* Badge "★ padrão" no meta */
.default-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  background:rgba(184,92,0,.10);
  color:var(--color-warning);
  border-radius:var(--pacto-radius-pill);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:uppercase;
}
:root[data-theme="dark"] .default-badge{background:rgba(255,169,82,.14)}

/* Card com borda lateral levemente diferente quando é padrão */
.subt-card.is-default{
  border-left:3px solid var(--color-warning);
  padding-left:4px;
}

/* ============================================================
 * Pacto DS · Card horizontal CRUD (padrão sistêmico)
 * Usado por: Subtítulos, Títulos e qualquer lista futura.
 * Adicionado em F2.5.1.c (hotfix — classes haviam ficado inline
 * no _layout.php antigo, agora centralizadas no DS).
 * ============================================================ */

/* Container de cards */
.cards{display:flex;flex-direction:column;gap:8px}

/* Card horizontal */
.subt-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:14px 18px 14px 6px;
  box-shadow:var(--shadow-sm);
  transition:var(--pacto-transition-base);
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}
.subt-card:hover{
  border-color:var(--color-border-strong);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

/* Drag handle */
.drag-handle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:32px;
  color:var(--color-text-subtle);
  cursor:grab;
  opacity:0;
  transition:
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease),
    color var(--pacto-transition-duration) var(--pacto-transition-ease);
  flex-shrink:0;
}
.subt-card:hover .drag-handle{opacity:.6}
.drag-handle:hover{opacity:1 !important;color:var(--color-accent)}
.drag-handle:active{cursor:grabbing}

/* ID badge */
.subt-id{
  font-size:11px;
  color:var(--color-text-subtle);
  font-variant-numeric:tabular-nums;
  background:var(--color-surface-alt);
  padding:3px 8px;
  border-radius:4px;
  flex-shrink:0;
  font-weight:500;
}

/* Wrapper de título + meta */
.subt-title-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Input inline editável */
.subt-input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:14.5px;
  color:var(--color-text);
  font-weight:600;
  letter-spacing:-.1px;
  padding:5px 9px;
  margin-left:-9px;
  border-radius:5px;
  line-height:1.3;
  font-family:inherit;
  transition:
    background var(--pacto-transition-duration) var(--pacto-transition-ease),
    box-shadow var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.subt-input:hover{background:var(--color-surface-alt)}
.subt-input:focus{
  background:var(--color-surface-alt);
  box-shadow:0 0 0 1px var(--color-accent), var(--pacto-focus-ring);
}

/* Estado editing (card inteiro) */
.subt-card.editing{
  border-color:var(--color-accent);
  background:linear-gradient(90deg, var(--tint-accent-hover) 0%, var(--color-surface) 30%);
  box-shadow:var(--shadow-md);
}

/* Meta abaixo do título */
.subt-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  color:var(--color-text-subtle);
  padding-left:9px;
  margin-left:-9px;
}
.subt-meta .dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--color-text-subtle);
}
.subt-meta strong{
  color:var(--color-text-muted);
  font-weight:600;
}

/* Usage pill */
.usage-pill{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:5px 11px;
  background:var(--tint-accent-hover);
  border:1px solid transparent;
  border-radius:50px;
  flex-shrink:0;
}
.usage-num{
  font-size:13px;
  font-weight:600;
  color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.usage-lbl{
  font-size:10px;
  color:var(--color-accent);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:500;
  line-height:1;
}
.usage-pill.zero{
  background:var(--color-surface-alt);
  border-color:var(--color-border);
}
.usage-pill.zero .usage-num,
.usage-pill.zero .usage-lbl{color:var(--color-text-subtle)}

/* Ações do card (hover revela) */
.subt-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
  opacity:0;
  transition:opacity var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.subt-card:hover .subt-actions,
.subt-card.editing .subt-actions{opacity:1}

/* Card de "novo item" (pontilhado) */
.new-card{
  background:transparent;
  border:1.5px dashed var(--color-border);
  border-radius:var(--pacto-radius-lg);
  padding:13px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--color-text-subtle);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:var(--pacto-transition-base);
}
.new-card:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
  background:var(--tint-accent-hover);
}
.new-card .plus{
  width:20px;
  height:20px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid currentColor;
  font-size:13px;
  font-weight:600;
}

/* List header (título da seção + ações) */
.list-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:18px;
  gap:16px;
  flex-wrap:wrap;
}
.list-header h2{
  font-size:18px;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:2px;
}
.list-header p{
  font-size:13px;
  color:var(--color-text-subtle);
}
.list-header .actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Search box */
.search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface);
  transition:var(--pacto-transition-color);
  width:280px;
  max-width:100%;
}
.search:focus-within{
  border-color:var(--color-accent);
  box-shadow:var(--pacto-focus-ring);
}
.search svg{flex-shrink:0;color:var(--color-text-subtle)}
.search input{
  flex:1;
  border:none;
  outline:none;
  background:none;
  color:var(--color-text);
  font-size:14px;
  min-width:0;
}
.search input::placeholder{color:var(--color-text-subtle)}

/* ============================================================
 * Pacto DS · Saved Indicator (F2.5 turbo)
 * Mini "✓ salvo" discreto pra ações frequentes reversíveis.
 * ============================================================ */

.saved-indicator{
  position:absolute;
  right:-4px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:4px;
  font-size:11px;
  font-weight:600;
  pointer-events:none;
  z-index:5;
  animation:savedIn var(--pacto-transition-duration) var(--pacto-transition-ease);
  white-space:nowrap;
}
.saved-indicator.saved-success{
  background:rgba(0,135,90,.12);
  color:var(--color-success);
}
.saved-indicator.saved-error{
  background:rgba(222,53,11,.12);
  color:var(--color-danger);
}
:root[data-theme="dark"] .saved-indicator.saved-success{background:rgba(61,220,151,.15)}
:root[data-theme="dark"] .saved-indicator.saved-error{background:rgba(255,107,91,.15)}

.saved-indicator.fade-out{
  opacity:0;
  transform:translateY(-50%) translateX(6px);
  transition:
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease),
    transform var(--pacto-transition-duration) var(--pacto-transition-ease);
}

@keyframes savedIn{
  from{opacity:0;transform:translateY(-50%) translateX(-6px)}
  to{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* Ajuste específico pro input de subtítulo/título: posiciona fora do input */
.subt-title-wrap{position:relative}
.subt-title-wrap .saved-indicator{right:4px;top:14px;transform:none}
.subt-title-wrap .saved-indicator.fade-out{transform:translateX(6px)}

/* Pro slider do logo */
.slider-row{position:relative}
.slider-row .saved-indicator{
  position:static;
  transform:none;
  margin-left:8px;
}
.slider-row .saved-indicator.fade-out{transform:translateX(6px)}

/* Pra input da aba geral — coloca depois do input */
.cfg-controls{position:relative}

/* ============================================================
 * Pacto DS · Polish F2.5.5
 * - Mini saved-indicator com posicionamento contextual
 * - Indicador pulsante "● Editando" nos cards
 * - Thumbnail real no preview do logo (substituindo iniciais)
 * ============================================================ */

/* ----- SAVED INDICATOR (reposicionado) ----- */

/* Reset da posição default agressiva */
.saved-indicator{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:50px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:uppercase;
  pointer-events:none;
  z-index:5;
  animation:savedIn var(--pacto-transition-duration) var(--pacto-transition-ease);
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}

/* Contexto 1: dentro de .subt-title-wrap (subtítulos/títulos inline edit) */
/* Aparece discretamente no canto superior direito do wrap, acima do input */
.subt-title-wrap{position:relative}
.subt-title-wrap .saved-indicator{
  right:0;
  top:-6px;
  transform:translateY(-50%);
}
.subt-title-wrap .saved-indicator.fade-out{
  transform:translateY(-50%) translateX(6px);
}

/* Contexto 2: slider do logo */
.slider-row{position:relative}
.slider-row .saved-indicator{
  position:static;
  margin-left:10px;
  animation:savedInLinear var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.slider-row .saved-indicator.fade-out{
  opacity:0;
  transform:translateX(8px);
  transition:
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease),
    transform var(--pacto-transition-duration) var(--pacto-transition-ease);
}

/* Contexto 3: input do cfg-card (aba Geral) */
/* Aparece sobreposto na direita do input, dentro do próprio card */
.cfg-card{position:relative}
.cfg-card .saved-indicator{
  right:170px;
  top:50%;
  transform:translateY(-50%);
}
@media (max-width:1100px){
  .cfg-card .saved-indicator{right:18px;top:-8px;transform:none}
}

@keyframes savedInLinear{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:translateX(0)}
}

/* ----- EDITING PULSE (indicador "● Editando") ----- */

.subt-card.editing::before{
  content:"● editando";
  position:absolute;
  top:-8px;
  left:16px;
  background:var(--color-accent);
  color:#fff;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:3px 9px;
  border-radius:50px;
  animation:editPulse var(--pacto-motion-pulse) ease-in-out infinite;
  box-shadow:0 2px 6px rgba(5,112,222,.35);
  z-index:3;
  pointer-events:none;
}

@keyframes editPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 2px 6px rgba(5,112,222,.35), 0 0 0 0 rgba(5,112,222,.4);
  }
  50%{
    transform:scale(1.03);
    box-shadow:0 2px 8px rgba(5,112,222,.45), 0 0 0 6px rgba(5,112,222,0);
  }
}

/* ----- LOGO THUMBNAIL REAL ----- */

.logo-thumb{
  overflow:hidden;
  padding:0;
  background:#fff;
}
.logo-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
:root[data-theme="dark"] .logo-thumb{background:#f8fafc}

/* ============================================================
 * Pacto DS · Polish final F2.5.6
 * - Remove pílula "● editando"
 * - Reescreve saved-indicator como mini check (sem texto)
 * - Nova classe .action-bar.saved (dot verde + destaque 2s)
 * ============================================================ */

/* ----- REMOVE pílula editando ----- */
.subt-card.editing::before{
  content:none !important;
  display:none !important;
}

/* ----- SAVED INDICATOR mini (só check) ----- */

.saved-indicator{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border-radius:50%;
  pointer-events:none;
  z-index:5;
  animation:savedMiniIn var(--pacto-transition-duration) var(--pacto-transition-ease);
  border:none;
  background:transparent;
}
.saved-indicator svg{
  width:14px;
  height:14px;
}
.saved-indicator.saved-success{color:var(--color-success)}
.saved-indicator.saved-error{color:var(--color-danger)}

/* Texto "salvo"/"erro" escondido — agora é só o check */
.saved-indicator::after{content:none !important}
.saved-indicator{font-size:0}

.saved-indicator.fade-out{
  opacity:0;
  transform:scale(.8);
  transition:
    opacity var(--pacto-transition-duration) var(--pacto-transition-ease),
    transform var(--pacto-transition-duration) var(--pacto-transition-ease);
}

@keyframes savedMiniIn{
  0%{opacity:0;transform:scale(.5)}
  60%{transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}

/* Contexto: subt-title-wrap (cards de subtítulo/título) */
.subt-title-wrap{position:relative}
.subt-title-wrap .saved-indicator{
  right:8px;
  top:8px;
}

/* Contexto: cfg-card (aba Geral) — dentro do próprio input */
.input-wrap,
.cfg-controls{position:relative}

.cfg-input{padding-right:28px}
.cfg-input + .saved-indicator,
.input-wrap .saved-indicator{
  right:6px;
  top:50%;
  transform:translateY(-50%);
}
.input-wrap .saved-indicator.fade-out,
.cfg-input + .saved-indicator.fade-out{
  transform:translateY(-50%) scale(.8);
}

/* Contexto: slider do logo — depois da pílula de valor */
.slider-row{position:relative;display:flex;align-items:center;gap:12px}
.slider-row .saved-indicator{
  position:static;
  transform:none;
  animation:savedMiniInInline var(--pacto-transition-duration) var(--pacto-transition-ease);
}
.slider-row .saved-indicator.fade-out{
  transform:scale(.8) translateX(4px);
}
@keyframes savedMiniInInline{
  0%{opacity:0;transform:scale(.5) translateX(-4px)}
  60%{transform:scale(1.15)}
  100%{opacity:1;transform:scale(1) translateX(0)}
}

/* ----- ACTION BAR com estado saved ----- */

.action-bar-info{
  transition:color var(--pacto-transition-duration) var(--pacto-transition-ease);
}

.action-bar.saved{
  border-color:rgba(0,135,90,.35);
  background:rgba(0,135,90,.04);
}
:root[data-theme="dark"] .action-bar.saved{
  background:rgba(61,220,151,.06);
  border-color:rgba(61,220,151,.35);
}

.action-bar.saved .action-bar-info{
  color:var(--color-success);
  font-weight:600;
}

.action-bar.saved .dot-pulse{
  background:var(--color-success);
  animation:pulseSuccess var(--pacto-motion-pulse, 2s) infinite;
  box-shadow:0 0 0 0 rgba(0,135,90,.5);
}
:root[data-theme="dark"] .action-bar.saved .dot-pulse{
  box-shadow:0 0 0 0 rgba(61,220,151,.5);
}

@keyframes pulseSuccess{
  0%,100%{box-shadow:0 0 0 0 rgba(0,135,90,.4)}
  50%{box-shadow:0 0 0 8px rgba(0,135,90,0)}
}

/* ============================================================
 * Pacto DS · CRUD v1.2 — estados oficiais faltantes
 * ============================================================ */

.subt-card.dragging{
  opacity:.5;
  transform:rotate(.5deg) scale(1.01);
  box-shadow:var(--shadow-lg);
  border-color:var(--color-accent);
}

.subt-card.dragging .drag-handle,
.subt-card.dragging .subt-actions{
  opacity:1;
}

.drop-indicator{
  width:100%;
  height:3px;
  border-radius:var(--pacto-radius-pill);
  background:var(--color-accent);
  box-shadow:0 0 0 4px var(--tint-accent-hover);
  animation:dropIndicatorGlow var(--pacto-motion-pulse, 2s) infinite;
}

@keyframes dropIndicatorGlow{
  0%,100%{box-shadow:0 0 0 0 var(--tint-accent-active)}
  50%{box-shadow:0 0 0 8px transparent}
}

.crud-save-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--color-text-subtle);
  opacity:0;
  transform:translateY(-4px);
  transition:var(--pacto-transition-color);
}

.subt-card.editing .crud-save-hint{
  opacity:1;
  transform:none;
}

/* ============================================================
 * Pacto DS · Primitives v1.2 para modal e histórico
 * ============================================================ */

.modal-overlay,
.ds-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--pacto-overlay-backdrop);
  z-index:1100;
}

.modal,
.ds-modal{
  width:min(560px,100%);
  max-height:min(88vh,960px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  box-shadow:var(--shadow-lg);
}

.ds-modal--lg{
  width:min(800px,100%);
}

#proposalHistoryModal .modal{
  width:min(800px,100%);
  max-width:min(800px,100%) !important;
}

.ds-modal-header,
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:24px;
  border-bottom:1px solid var(--color-border);
  background:var(--color-surface-alt);
}

.ds-modal-title{
  font-size:18px;
  font-weight:600;
  color:var(--color-text);
}

.ds-modal-copy{
  margin-top:8px;
  font-size:12.5px;
  color:var(--color-text-subtle);
  line-height:1.5;
}

.ds-modal-close{
  width:var(--pacto-control-height-icon-header);
  height:var(--pacto-control-height-icon-header);
  min-height:var(--pacto-control-height-icon-header);
}

.ds-modal-body{
  padding:24px;
  overflow:auto;
}

.ds-modal-body-scroll{
  overflow:auto;
  max-height:min(60vh,640px);
}

.ds-modal-footer{
  padding:16px 24px;
  border-top:1px solid var(--color-border);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.modal-actions,
.ds-modal-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

:root[data-theme="dark"] .ds-modal-footer{
  background:rgba(22,31,44,.85);
}

.ds-modal-footer .action-bar{
  margin-top:0;
}

/* Accordion / collapsible */
.ds-accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ds-accordion-item{
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  background:var(--color-surface);
  overflow:hidden;
  transition:var(--pacto-transition-base);
}

.ds-accordion-item.is-open{
  border-color:var(--color-accent);
  box-shadow:var(--shadow-md);
}

.ds-accordion-trigger{
  width:100%;
  min-height:var(--pacto-control-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  background:var(--color-surface-alt);
  color:var(--color-text);
  font-size:14px;
  font-weight:600;
  text-align:left;
  transition:var(--pacto-transition-base);
}

.ds-accordion-trigger:hover{
  background:var(--tint-accent-hover);
}

.ds-accordion-trigger[aria-expanded="true"]{
  background:linear-gradient(90deg,var(--tint-accent-active),var(--tint-accent-hover));
  color:var(--color-accent);
}

.ds-accordion-panel{
  padding:16px 24px 24px;
  border-top:1px solid var(--color-border);
}

/* Badge / chip genérico + segmented chips */
.ds-chip-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ds-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-pill);
  background:var(--color-surface-alt);
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2px;
  transition:var(--pacto-transition-base);
}

.ds-chip:hover{
  border-color:var(--color-border-strong);
  background:var(--tint-accent-hover);
  color:var(--color-text);
}

.ds-chip.is-active,
.ds-chip[aria-pressed="true"]{
  border-color:var(--color-accent);
  background:linear-gradient(90deg,var(--tint-accent-active),var(--tint-accent-hover));
  color:var(--color-accent);
}

.ds-chip--neutral{background:var(--color-surface-alt);color:var(--color-text-muted)}
.ds-chip--accent{background:var(--tint-accent-hover);color:var(--color-accent);border-color:transparent}
.ds-chip--success{background:var(--tint-success);color:var(--color-success);border-color:transparent}
.ds-chip--warning{background:var(--tint-warning);color:var(--color-warning);border-color:transparent}
.ds-chip--danger{background:var(--tint-danger);color:var(--color-danger);border-color:transparent}
.ds-chip--source{
  background:var(--color-surface-alt);
  color:var(--color-text-subtle);
  border-style:dashed;
}

.ds-segmented{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-pill);
  background:var(--color-surface);
}

/* Progress / meter */
.ds-progress,
.ds-meter{
  width:100%;
  height:8px;
  border-radius:var(--pacto-radius-pill);
  background:var(--color-surface-alt);
  border:1px solid var(--color-border);
  overflow:hidden;
}

.ds-progress-bar,
.ds-meter-bar{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));
  transition:width var(--pacto-transition-duration) var(--pacto-transition-ease);
}

.ds-progress-bar.is-success,
.ds-meter-bar.is-success{background:linear-gradient(90deg,var(--color-success),#33b885)}
.ds-progress-bar.is-warning,
.ds-meter-bar.is-warning{background:linear-gradient(90deg,var(--color-warning),#D97706)}
.ds-progress-bar.is-danger,
.ds-meter-bar.is-danger{background:linear-gradient(90deg,var(--color-danger),#dc2626)}

/* Tooltip */
.ds-tooltip-anchor{
  position:relative;
}

.ds-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  min-width:180px;
  max-width:260px;
  padding:8px 12px;
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-xl);
  font-size:12.5px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:var(--pacto-transition-color);
  z-index:20;
}

.ds-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:var(--color-border) transparent transparent transparent;
}

.ds-tooltip-anchor:hover .ds-tooltip,
.ds-tooltip-anchor:focus-within .ds-tooltip,
.ds-tooltip-anchor.is-visible .ds-tooltip{
  opacity:1;
}

/* Paginação */
.ds-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.ds-page-btn{
  min-width:var(--pacto-control-height);
  min-height:var(--pacto-control-height);
  padding:0 12px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:13px;
  font-weight:500;
  transition:var(--pacto-transition-base);
}

.ds-page-btn:hover{
  border-color:var(--color-border-strong);
  background:var(--color-surface-alt);
  color:var(--color-text);
}

.ds-page-btn.is-active,
.ds-page-btn[aria-current="page"]{
  border-color:var(--color-accent);
  background:linear-gradient(90deg,var(--tint-accent-active),var(--tint-accent-hover));
  color:var(--color-accent);
  font-weight:600;
}

.ds-page-btn:disabled,
.ds-page-btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* Summary rail e lista compacta para specs do simulador */
.ds-summary-rail{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-lg);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}

.ds-compact-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ds-compact-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface-alt);
}

/* Preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Ajustes responsivos mínimos para modal grande */
@media (max-width:1024px){
  .modal-overlay,
  .ds-modal-overlay{
    padding:16px;
  }

  .ds-modal--lg,
  #proposalHistoryModal .modal{
    width:min(90vw,800px);
  }
}

@media (max-width:767px){
  .modal-overlay,
  .ds-modal-overlay{
    padding:0;
    align-items:stretch;
  }

  .modal,
  .ds-modal,
  .ds-modal--lg,
  #proposalHistoryModal .modal{
    width:100%;
    max-width:100% !important;
    max-height:100vh;
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  .ds-modal-header,
  .modal-head,
  .ds-modal-body,
  .ds-modal-footer{
    padding:16px;
  }

  .ds-pagination{
    justify-content:flex-start;
  }
}

html { background: var(--color-bg); color: var(--color-text); }

/* ========== Shell Opcao B (staged, unused until wiring) ========== */

.app-shell-v2{
  min-height:100vh;
  background:var(--color-bg);
  color:var(--color-text);
}

.app-shell-v2 .topbar{
  position:sticky;
  top:0;
  z-index:40;
  height:56px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.app-shell-v2 .topbar-left,
.app-shell-v2 .brand,
.app-shell-v2 .topbar-actions,
.app-shell-v2 .user-chip{
  display:flex;
  align-items:center;
}

.app-shell-v2 .topbar-left,
.app-shell-v2 .brand{
  gap:12px;
  min-width:0;
}

.app-shell-v2 .topbar-actions{
  gap:8px;
}

.app-shell-v2 .topbar-center{
  flex:1;
  display:flex;
  justify-content:center;
  min-width:0;
}

.app-shell-v2 .brand-mark,
.app-shell-v2 .avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
}

.app-shell-v2 .brand-mark{
  width:32px;
  height:32px;
  border-radius:var(--pacto-radius-md);
  font-size:15px;
  font-weight:700;
}

.app-shell-v2 .brand-name{
  font-size:15px;
  font-weight:600;
  color:var(--color-text);
  white-space:nowrap;
}

.app-shell-v2 .brand-tag,
.app-shell-v2 .topbar-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background:var(--color-surface-alt);
  color:var(--color-text-subtle);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
}

.app-shell-v2 .topbar-tab{
  text-transform:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  color:var(--color-text-muted);
}

.app-shell-v2 .theme-toggle,
.app-shell-v2 .hamburger{
  min-height:var(--pacto-control-height-icon-header);
  border:1px solid var(--color-border);
  border-radius:var(--pacto-radius-md);
  background:var(--color-surface-alt);
  color:var(--color-text-muted);
  transition:var(--pacto-transition-base);
}

.app-shell-v2 .theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
}

.app-shell-v2 .theme-toggle:hover,
.app-shell-v2 .hamburger:hover{
  background:var(--tint-accent-hover);
  color:var(--color-text);
  border-color:var(--color-border-strong);
}

.app-shell-v2 .hamburger{
  display:none;
  width:var(--pacto-control-height-icon-header);
  min-width:var(--pacto-control-height-icon-header);
  justify-content:center;
  padding:0;
}

.app-shell-v2 .avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}

.app-shell-v2 .user-chip{
  gap:8px;
  min-height:38px;
  padding:0 10px 0 4px;
  border:1px solid var(--color-border);
  border-radius:999px;
  background:var(--color-surface-alt);
  color:var(--color-text);
}

.app-shell-v2 .shell{
  display:block;
  max-width:1440px;
  margin:0 auto;
  padding:24px 40px 48px;
  min-height:auto;
}

.app-shell-v2 .page{
  flex:none;
  padding:0;
}

.app-shell-v2 .page-header{
  margin-bottom:20px;
}

.app-shell-v2 .layout{
  margin-top:0;
  grid-template-columns:240px minmax(0,1fr);
  align-items:start;
}

.app-shell-v2 .sidebar{
  position:sticky;
  top:80px;
  z-index:30;
  padding:16px 12px;
  max-height:calc(100vh - 96px);
  overflow:auto;
}

.app-shell-v2 .sidebar-section + .sidebar-section{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--color-border);
}

.app-shell-v2 .sidebar-label{
  padding:0 10px 8px;
  margin-bottom:0;
}

.app-shell-v2 .sidebar-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  text-align:left;
  background:transparent;
}

.app-shell-v2 .sidebar-item.active::before{
  left:-12px;
  top:6px;
  bottom:6px;
  border-radius:0 2px 2px 0;
}

.app-shell-v2 .sidebar-icon{
  width:18px;
  min-width:18px;
  text-align:center;
  opacity:.85;
}

.app-shell-v2 .sidebar-count{
  margin-left:auto;
  padding:1px 7px;
  border-radius:999px;
  background:var(--tint-accent-active);
  color:var(--color-accent);
  font-size:10.5px;
  font-weight:600;
}

.app-shell-v2 .sim-main{
  min-width:0;
}

.app-shell-v2 .sidebar-scrim{
  display:none;
  position:fixed;
  inset:0;
  z-index:50;
  background:var(--pacto-overlay-backdrop);
}

body.drawer-open .app-shell-v2 .sidebar-scrim{
  display:block;
}

body.modal-open .app-shell-v2 .layout{
  overflow:hidden;
}

@media (max-width:980px){
  .app-shell-v2 .layout{
    grid-template-columns:1fr;
  }

  .app-shell-v2 .topbar-center{
    display:none;
  }

  .app-shell-v2 .hamburger{
    display:inline-flex;
    align-items:center;
  }

  .app-shell-v2 .sidebar{
    position:fixed;
    top:56px;
    left:-280px;
    bottom:0;
    width:260px;
    max-width:85vw;
    max-height:none;
    border-radius:0;
    border-left:none;
    border-top:none;
    border-bottom:none;
    transition:left var(--pacto-transition-duration) var(--pacto-transition-ease);
  }

  .app-shell-v2 .sidebar.is-open{
    left:0;
    box-shadow:var(--shadow-lg);
  }

  .app-shell-v2 .shell{
    padding:20px 20px 40px;
  }
}

@media (max-width:720px){
  .app-shell-v2 .topbar{
    padding:0 12px;
    gap:8px;
  }

  .app-shell-v2 .brand-tag,
  .app-shell-v2 .user-chip-name{
    display:none;
  }

  .app-shell-v2 .user-chip{
    padding:0 4px;
    background:transparent;
    border-color:transparent;
  }

  .app-shell-v2 .shell{
    padding:16px 14px 40px;
  }
}

@media (max-width:520px){
  .app-shell-v2 .theme-toggle .lbl{
    display:none;
  }
}