:root {
      /* ════════════════════════════════════════════
         OBSIDIAN PRECISION — Sistema de Design v3
         Inspiração: Linear · Vercel · Stripe
      ════════════════════════════════════════════ */

      /* Base — Preto azulado profundo, não neutro */
      --bg:        #09090f;
      --bg-alt:    #0c0c14;
      --surface:   #0f0f1a;
      --surface2:  #14141f;
      --surface3:  #1a1a28;
      --surface4:  #20202e;

      /* Bordas sutis com tom azulado */
      --border:        #1e1e2e;
      --border-mid:    #252535;
      --border-bright: #30304a;

      /* Acento principal — Âmbar/Cobre (não verde) */
      --accent:          #f0a500;
      --accent-bright:   #ffbe1a;
      --accent-dim:      #c27f00;
      --accent-subtle:   rgba(240,165,0,0.08);
      --accent-glow:     rgba(240,165,0,0.18);
      --accent-glow-lg:  rgba(240,165,0,0.30);

      /* Verde — apenas para sucesso/confirmação */
      --green:      #22d67a;
      --green-dim:  #16a855;
      --green-glow: rgba(34,214,122,0.12);

      /* Feedback */
      --red:       #f03e5a;
      --red-dim:   #bf1b37;
      --red-glow:  rgba(240,62,90,0.14);
      --amber:     #f59e0b;
      --blue:      #60a5fa;
      --blue-dim:  #2563eb;

      /* Texto — escala platinada (alto contraste real, legível) */
      --text:       #ffffff;
      --text-soft:  #eaeaf2;
      --text-muted: #cdcdde;
      --text-dim:   #ababc2;

      /* Tipografia */
      --font-sans: 'Geist', 'DM Sans', system-ui, sans-serif;
      --font-mono: 'Geist Mono', 'DM Mono', monospace;

      /* Geometria */
      --radius:    10px;
      --radius-sm: 7px;
      --radius-lg: 16px;
      --radius-xl: 22px;

      /* Sombras */
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
      --shadow:    0 4px 16px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
      --shadow-lg: 0 20px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
      --shadow-accent: 0 4px 20px rgba(240,165,0,0.25);
    }

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

    /* ── Força teclado numérico em todos os inputs numéricos ── */
    input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .app-version-badge {
      position: fixed;
      right: 12px;
      bottom: 10px;
      z-index: 10000;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(34,197,94,0.45);
      background: rgba(5,16,10,0.92);
      color: #bbf7d0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .35px;
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
      pointer-events: none;
    }
    .login-version-protecao {
      margin-top: 8px;
      padding: 7px 10px;
      border: 1px solid rgba(34,197,94,0.35);
      border-radius: 999px;
      background: rgba(34,197,94,0.10);
      color: #bbf7d0;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
    }

    /* ---- LAYOUT ---- */
    .shell { display: flex; min-height: 100vh; }

    /* ---- SIDEBAR ---- */
    .sidebar {
      width: 256px;
      flex-shrink: 0;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      padding: 14px 10px 14px;
      gap: 2px;
      position: relative;
      overflow: hidden;
    }
    .sidebar::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(180deg,
        transparent 0%,
        var(--border-mid) 20%,
        var(--border-bright) 50%,
        var(--border-mid) 80%,
        transparent 100%
      );
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 6px;
    }
    .logo img {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border-radius: 8px;
      box-shadow: 0 0 0 1px rgba(240,165,0,0.3), 0 4px 12px rgba(0,0,0,0.5);
    }
    .logo strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.3px;
      font-family: var(--font-sans);
    }
    .logo span { color: var(--text-muted); font-weight: 400; font-size: 10px; display: block; margin-top: 1px; letter-spacing: 0.3px; }
    .login-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 18px;
      text-align: center;
    }
    .login-brand img {
      width: 82px;
      height: 82px;
      border-radius: 24px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.3);
      margin-bottom: 14px;
    }
    .login-brand-title {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.8px;
      color: var(--text);
    }
    .login-brand-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    /* ======== LOGIN SCREEN — REDESIGN 2-FASES ======== */
    @keyframes loginFadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes loginFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes loginSlideLeft {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(-40px); }
    }
    @keyframes loginSlideRight {
      from { opacity: 0; transform: translateX(40px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulseGreen {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16,217,122,0); }
      50% { box-shadow: 0 0 0 8px rgba(16,217,122,0.15); }
    }

    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 12px;
      background: var(--bg);
      color: var(--text);
    }
    /* grade decorativa com tom âmbar sutil */
    .login-screen::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(240,165,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240,165,0,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    /* brilho central âmbar */
    .login-screen::after {
      content: '';
      position: fixed;
      top: -20%;
      right: -10%;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle at center, rgba(240,165,0,0.08) 0%, rgba(240,165,0,0.02) 40%, transparent 70%);
      pointer-events: none;
      filter: blur(60px);
    }

    /* ---- CARD CENTRAL ---- */
    .login-card {
      position: relative;
      z-index: 1;
      width: min(400px, calc(100vw - 28px));
      max-height: calc(100dvh - 24px);
      overflow: hidden auto;
      background: rgba(15,15,26,0.98);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px 32px 24px;
      backdrop-filter: blur(20px);
      box-shadow:
        0 0 0 1px rgba(240,165,0,0.08),
        0 40px 100px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(240,165,0,0.06);
      margin: 0;
    }

    /* ---- BRAND ---- */
    .login-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 18px;
      animation: loginFadeUp .5s ease both;
    }
    .login-brand img {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,197,94,0.2);
      margin-bottom: 10px;
    }
    .login-brand-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--text);
    }
    .login-brand-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .login-version-protecao {
      margin-top: 8px;
      padding: 4px 12px;
      border: 1px solid rgba(34,197,94,0.3);
      border-radius: 999px;
      background: rgba(34,197,94,0.08);
      color: #86efac;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    /* ---- FASES ---- */
    .login-fase {
      transition: none;
    }
    .login-fase.saindo {
      animation: loginSlideLeft .28s ease forwards;
      pointer-events: none;
    }
    .login-fase.entrando {
      animation: loginSlideRight .32s ease both;
    }

    /* ---- FORM ---- */
    .login-form {
      display: flex;
      flex-direction: column;
      gap: 9px;
      animation: loginFadeUp .5s .1s ease both;
    }

    .login-field-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .login-field-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--text-muted);
      padding-left: 2px;
    }
    .login-input {
      width: 100%;
      min-height: 44px;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-alt);
      color: var(--text);
      font-size: 14px;
      font-family: var(--font-sans);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .login-input::placeholder { color: var(--text-dim); }
    .login-input:focus {
      border-color: var(--accent);
      background: var(--surface);
      box-shadow: 0 0 0 3px rgba(240,165,0,0.1);
    }

    .login-checks {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 2px 0;
    }
    .login-check-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .login-check-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      accent-color: var(--green);
      cursor: pointer;
      pointer-events: auto;
    }

    .login-btn-primary {
      width: 100%;
      min-height: 44px;
      padding: 11px 13px;
      border: none;
      border-radius: 8px;
      background: var(--accent);
      color: #000;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-sans);
      cursor: pointer;
      letter-spacing: .3px;
      transition: all .2s ease;
      box-shadow: var(--shadow-accent);
      position: relative;
      overflow: hidden;
    }
    .login-btn-primary:hover {
      background: var(--accent-bright);
      transform: translateY(-1px);
      box-shadow: 0 6px 30px rgba(240,165,0,0.4);
    }
    .login-btn-primary:active {
      transform: translateY(0);
    }

    .login-btn-secondary {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid rgba(34,197,94,0.15);
      border-radius: 10px;
      background: transparent;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
    }
    .login-btn-secondary:hover {
      border-color: rgba(34,197,94,0.35);
      color: var(--text);
      background: rgba(34,197,94,0.05);
    }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-dim);
      font-size: 12px;
    }
    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .login-hint {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.55;
      text-align: center;
      padding: 0 4px;
    }

    /* ---- STORE PICKER (FASE 2) ---- */
    .login-store-picker {
      display: none;
      flex-direction: column;
      gap: 0;
    }
    .login-store-picker.show { display: flex; }

    .login-store-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .login-store-back-btn {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(34,197,94,0.2);
      border-radius: 10px;
      background: rgba(34,197,94,0.06);
      color: var(--green);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s, border-color .2s;
    }
    .login-store-back-btn:hover {
      background: rgba(34,197,94,0.12);
      border-color: rgba(34,197,94,0.4);
    }
    .login-store-title-block { flex: 1; }
    .login-store-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }
    .login-store-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .login-store-badge {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(34,197,94,0.15);
      border: 1px solid rgba(34,197,94,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      animation: pulseGreen 2.5s ease-in-out infinite;
    }

    .login-store-search {
      width: 100%;
      padding: 11px 14px 11px 40px;
      border-radius: 12px;
      border: 1px solid rgba(34,197,94,0.15);
      background: rgba(5,16,10,0.6);
      color: var(--text);
      font-family: inherit;
      font-size: 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b8f70' stroke-width='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");
      background-repeat: no-repeat;
      background-position: 13px center;
      margin-bottom: 12px;
    }
    .login-store-search:focus {
      border-color: rgba(34,197,94,0.5);
      box-shadow: 0 0 0 3px rgba(34,197,94,0.08);
    }

    .login-store-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 260px;
      overflow-y: auto;
      padding-right: 2px;
    }
    .login-store-list::-webkit-scrollbar { width: 4px; }
    .login-store-list::-webkit-scrollbar-track { background: transparent; }
    .login-store-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .login-store-option {
      width: 100%;
      border: 1px solid rgba(34,197,94,0.12);
      border-radius: 10px;
      background: rgba(5,16,10,0.5);
      color: var(--text);
      padding: 8px 12px;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: border-color .2s, background .2s, transform .15s;
    }
    .login-store-admin-panel {
      background: linear-gradient(135deg, rgba(16,217,122,0.12) 0%, rgba(16,217,122,0.06) 100%);
      border-color: rgba(16,217,122,0.35);
      box-shadow: 0 0 20px rgba(16,217,122,0.1);
    }
    .login-store-admin-panel:hover {
      background: linear-gradient(135deg, rgba(16,217,122,0.2) 0%, rgba(16,217,122,0.1) 100%);
      border-color: rgba(16,217,122,0.6);
    }
    .login-store-option:hover {
      border-color: rgba(34,197,94,0.5);
      background: rgba(34,197,94,0.07);
      transform: translateY(-1px);
    }
    .login-store-option:active { transform: translateY(0); }
    .login-store-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .login-store-info { flex: 1; min-width: 0; }
    .login-store-option strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .login-store-option span { color: var(--text-muted); font-size: 11px; margin-top: 1px; display: block; }
    .login-store-arrow {
      color: var(--text-dim);
      font-size: 16px;
      flex-shrink: 0;
      transition: color .2s, transform .2s;
    }
    .login-store-option:hover .login-store-arrow {
      color: var(--green);
      transform: translateX(3px);
    }

    .login-store-empty {
      padding: 28px 12px;
      border: 1px dashed rgba(34,197,94,0.15);
      border-radius: 14px;
      color: var(--text-muted);
      font-size: 13px;
      text-align: center;
    }

    /* ---- CAIXAS SECUNDÁRIAS ---- */
    .login-request-box {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
      padding: 16px;
      background: rgba(5,16,10,0.4);
      border: 1px solid rgba(34,197,94,0.12);
      border-radius: 14px;
    }
    .login-auth-box {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
      padding: 16px;
      background: rgba(5,16,10,0.4);
      border: 1px solid rgba(34,197,94,0.12);
      border-radius: 14px;
    }

    /* ---- FOOTER ---- */
    .login-footer {
      margin-top: 12px;
      text-align: center;
      font-size: 11px;
      line-height: 1.5;
      color: var(--text-dim);
      animation: loginFadeIn .6s .3s ease both;
    }

    @media (max-height: 700px) {
      .login-card { padding: 18px 24px 16px; }
      .login-brand { margin-bottom: 12px; }
      .login-brand img { width: 46px; height: 46px; margin-bottom: 8px; }
      .login-brand-title { font-size: 18px; }
      .login-brand-sub { font-size: 10px; }
      .login-version-protecao { font-size: 10px; padding: 3px 10px; }
      .login-form { gap: 7px; }
      .login-input { min-height: 38px; padding: 7px 12px; font-size: 13px; }
      .login-btn-primary { min-height: 38px; padding: 8px 12px; }
      .login-btn-secondary { min-height: 34px; padding: 7px 10px; }
      .login-divider { font-size: 11px; }
      .login-hint { display: none; }
      .login-footer { margin-top: 8px; font-size: 10px; line-height: 1.35; }
    }
    .topbar-switch-store-btn {
      min-height: 42px;
      height: 42px;
      padding: 7px 14px !important;
      border-radius: 12px !important;
      border-color: rgba(56,189,248,0.72) !important;
      background: rgba(14,116,144,0.22) !important;
      color: #dbeafe !important;
      font-weight: 800 !important;
      white-space: nowrap;
    }

    @media (max-height: 760px) {
      .login-screen {
        justify-content: center;
      }
      .login-brand-sub {
        font-size: 10px;
      }
    }

    .nav-group {
      margin: 12px 0 0;
      padding: 10px 0 0;
      border-top: 1px solid rgba(107, 143, 112, 0.2);
    }
    .nav-group.featured {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      box-shadow: none;
    }
    .nav-label {
      display: block;
      padding: 10px 10px 5px;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--text-dim);
      font-family: var(--font-mono);
    }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-muted);
      text-align: left;
      padding: 7px 8px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      font-family: var(--font-sans);
      font-weight: 500;
      transition: color .15s ease, background .15s ease, border-color .15s ease;
      margin-bottom: 1px;
      position: relative;
    }
    .nav-btn:hover {
      background: var(--surface3);
      border-color: var(--border-mid);
      color: var(--text-soft);
    }
    .nav-btn.ativo {
      background: var(--accent-subtle);
      border-color: rgba(240,165,0,0.22);
      color: var(--accent-bright);
    }
    .nav-btn.ativo::before {
      content: '';
      position: absolute;
      left: -1px; top: 20%; bottom: 20%;
      width: 2px;
      background: var(--accent);
      border-radius: 0 2px 2px 0;
      box-shadow: 0 0 8px var(--accent-glow);
    }
    .nav-btn .icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: var(--surface3);
      border: 1px solid var(--border-mid);
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      font-family: var(--font-mono);
      transition: all .15s;
    }
    .nav-btn:hover .icon {
      background: var(--surface4);
      border-color: var(--border-bright);
      color: var(--text-soft);
    }
    .nav-btn.ativo .icon {
      background: rgba(240,165,0,0.15);
      border-color: rgba(240,165,0,0.3);
      color: var(--accent);
      box-shadow: 0 0 8px rgba(240,165,0,0.15);
    }
    .nav-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }
    .nav-title {
      font-size: 13px;
      font-weight: 500;
      color: inherit;
      line-height: 1.2;
    }
    .nav-hint {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 1px;
      line-height: 1.3;
    }
    .nav-btn.ativo .nav-hint { color: rgba(240,165,0,0.5); }
    .nav-btn:hover .nav-hint { color: var(--text-muted); }
    .nav-group-checklist .nav-submenu,
    .nav-group-relatorios .nav-submenu,
    .nav-group-financeiro .nav-submenu,
    .nav-group-funcionarios .nav-submenu,
    .nav-group-configuracao .nav-submenu,
    .nav-group-saas .nav-submenu {
      display: none;
      flex-direction: column;
      gap: 2px;
      margin: 4px 0 2px;
      padding-left: 8px;
    }
    .nav-group-checklist.open .nav-submenu,
    .nav-group-relatorios.open .nav-submenu,
    .nav-group-financeiro.open .nav-submenu,
    .nav-group-funcionarios.open .nav-submenu,
    .nav-group-configuracao.open .nav-submenu,
    .nav-group-saas.open .nav-submenu {
      display: flex;
    }
    .nav-btn-parent {
      justify-content: space-between;
    }
    .nav-caret {
      font-size: 12px;
      color: var(--text-dim);
      transition: transform 0.15s ease;
      margin-left: 6px;
    }
    .nav-group-checklist.open .nav-caret,
    .nav-group-relatorios.open .nav-caret,
    .nav-group-financeiro.open .nav-caret,
    .nav-group-funcionarios.open .nav-caret,
    .nav-group-configuracao.open .nav-caret,
    .nav-group-saas.open .nav-caret {
      transform: rotate(180deg);
    }
    .nav-sub-btn {
      margin-bottom: 0;
      padding: 8px 10px;
      font-size: 13px;
      background: rgba(255, 255, 255, 0.02);
    }
    .nav-sub-btn.ativo {
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid rgba(34, 197, 94, 0.22);
      color: var(--text);
    }
    .nav-sub-btn.ativo .nav-title {
      color: var(--text);
    }
    .nav-sub-btn.ativo .nav-hint {
      color: var(--text-muted);
    }

    /* Relatórios em árvore */
    .nav-report-section {
      margin: 6px 0 8px;
      padding: 6px 0 4px 8px;
      border-left: 1px solid rgba(107,143,112,0.22);
    }
    .nav-report-heading {
      display: block;
      padding: 6px 10px 5px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--green);
      opacity: 0.9;
    }
    .nav-report-section .nav-sub-btn {
      margin-left: 4px;
      padding-left: 12px;
      background: rgba(255,255,255,0.018);
    }
    .nav-btn.nav-btn-alerta {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.28);
      color: #fecaca;
    }
    .nav-btn.nav-btn-alerta .icon {
      background: rgba(239, 68, 68, 0.16);
      border-color: rgba(239, 68, 68, 0.36);
      color: #fca5a5;
    }
    .nav-btn.nav-btn-alerta .nav-title {
      color: #fecaca;
    }
    .nav-btn.nav-btn-alerta .nav-hint {
      color: #fca5a5;
    }
    .nav-btn.nav-btn-alerta:hover {
      background: rgba(239, 68, 68, 0.16);
      color: #fee2e2;
    }
    .nav-btn.nav-btn-alerta.ativo {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.45);
      color: #fee2e2;
      box-shadow: 0 10px 24px rgba(239, 68, 68, 0.2);
    }
    .nav-btn.nav-btn-atraso-piscando {
      background: rgba(245, 158, 11, 0.14);
      border: 1px solid rgba(245, 158, 11, 0.42);
      color: #fde68a;
      animation: overdueNavPulse 1.35s ease-in-out infinite;
      box-shadow: 0 10px 24px rgba(245, 158, 11, 0.2);
    }
    .nav-btn.nav-btn-atraso-piscando .icon {
      background: rgba(245, 158, 11, 0.18);
      border-color: rgba(245, 158, 11, 0.42);
      color: #fbbf24;
    }
    .nav-btn.nav-btn-atraso-piscando .nav-title {
      color: #fde68a;
    }
    .nav-btn.nav-btn-atraso-piscando .nav-hint {
      color: #fcd34d;
    }
    .nav-btn.nav-btn-atraso-piscando:hover,
    .nav-btn.nav-btn-atraso-piscando.ativo {
      color: #fff7ed;
    }
    .alerta-rapido-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      padding: 7px 9px;
      font-family: inherit;
      font-size: 14px;
      resize: vertical;
      min-height: 74px;
    }
    .alerta-rapido-input:focus {
      outline: none;
      border-color: rgba(34,197,94,0.45);
      box-shadow: 0 0 0 1px rgba(34,197,94,0.16);
    }
    .alerta-rapido-check-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 7px 9px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      min-height: 48px;
      align-items: center;
    }
    .alerta-rapido-check-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text);
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(24, 34, 24, 0.7);
    }
    .nav-badge {
      margin-left: auto;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #0b0f0d;
      background: var(--amber);
      border: 1px solid rgba(245, 158, 11, 0.5);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
      line-height: 1;
      flex-shrink: 0;
    }
    @keyframes overdueNavPulse {
      0%, 100% {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.32);
        box-shadow: 0 8px 18px rgba(245, 158, 11, 0.14);
      }
      50% {
        background: rgba(249, 115, 22, 0.25);
        border-color: rgba(249, 115, 22, 0.6);
        box-shadow: 0 12px 26px rgba(249, 115, 22, 0.24);
      }
    }

    @media (max-width: 1180px) and (min-width: 901px) {
      .sidebar {
        width: 260px;
        padding-left: 12px;
        padding-right: 12px;
      }
      .nav-btn {
        padding: 9px 10px;
      }
      .nav-title {
        font-size: 13px;
      }
    }

    /* ---- MAIN ---- */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }
    .topbar-main {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }
    .topbar h1 { font-size: 16px; font-weight: 600; }
    .topbar .sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
    .topbar-main > div {
      display: none;
    }
    #topbarTitleWrap {
      display: block !important;
      min-width: 0;
    }
    .topbar-clock,
    .topbar-business-day {
      display: inline-flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      width: 190px;
      min-width: 180px;
      min-height: 42px;
      padding: 7px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface2);
      box-shadow: var(--shadow-sm);
      flex-shrink: 0;
    }
    .topbar-info-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--text-muted);
      line-height: 1;
    }
    .topbar-clock-time,
    .topbar-business-day-date {
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .topbar-clock-time {
      color: var(--green);
    }
    .topbar-business-day-date {
      color: #ffffff;
    }
    .topbar-business-day-date.status-3 {
      color: var(--green);
    }
    .topbar-business-day-date.status-2 {
      color: var(--amber);
    }
    .topbar-business-day-date.status-1 {
      color: var(--green);
    }
    #topbar-title,
    #topbar-sub {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #topbar-sub {
      display: none;
    }
    .topbar-user {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1px;
      min-width: 0;
      min-height: 32px;
      padding: 5px 11px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface2);
    }
    .topbar-store {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-width: 240px;
      width: 270px;
      max-width: 270px;
      min-height: 42px;
      padding: 7px 14px;
      border-radius: 10px;
      border: 1px solid var(--border-bright);
      background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      flex-shrink: 0;
    }
    .topbar-store-main {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1;
    }
    .topbar-store.is-switchable {
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .topbar-store.is-switchable:hover {
      transform: translateY(-1px);
      border-color: var(--border-bright);
      box-shadow: 0 4px 16px rgba(240,165,0,0.15);
    }
    .topbar-store-switch {
      display: none;
      flex: 0 0 auto;
      min-height: 28px;
      padding: 6px 9px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(5,16,10,0.18);
      color: #eff6ff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1;
      white-space: nowrap;
    }
    .topbar-store.is-switchable .topbar-store-switch {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .topbar-store .topbar-user-label {
      color: rgba(219,234,254,0.9);
    }
    .topbar-user-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .topbar-user-name {
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      color: var(--text);
      text-align: left;
      word-break: break-word;
    }
    .topbar-store-name {
      font-size: 16px;
      font-weight: 800;
      line-height: 1.15;
      color: #ffffff;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #topbarUserInfo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 130px;
      width: 150px;
      max-width: 150px;
    }
    .mobile-menu-btn {
      display: none;
      width: 36px;
      height: 36px;
      padding: 0;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      flex-shrink: 0;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
    .topbar-actions .btn-sm {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 12px;
    }
    .topbar-switch-store-btn {
      display: none !important;
    }
    .sync-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(34,197,94,0.16);
      background: rgba(34,197,94,0.08);
      color: var(--text);
      font-size: 11px;
      line-height: 1.2;
    }
    .sync-status.is-idle {
      color: var(--text-muted);
      border-color: rgba(107,143,112,0.18);
      background: rgba(17,26,20,0.92);
    }
    .sync-status.is-syncing {
      color: var(--green);
      border-color: rgba(34,197,94,0.28);
      box-shadow: 0 0 0 1px rgba(34,197,94,0.08), 0 10px 24px rgba(34,197,94,0.08);
    }
    .sync-status.is-error {
      color: #fecaca;
      border-color: rgba(239,68,68,0.28);
      background: rgba(127,29,29,0.18);
    }
    .sync-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--text-dim);
    }
    .sync-status.is-idle .sync-dot {
      background: var(--text-dim);
    }
    .sync-status.is-syncing .sync-dot {
      background: var(--green);
      animation: pulse 1.1s infinite;
    }
    .sync-status.is-error .sync-dot {
      background: var(--red);
    }
    .sync-status-copy {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .sync-status-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.7px;
      text-transform: uppercase;
    }
    .sync-status-text {
      color: inherit;
      white-space: nowrap;
    }
    .badge-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--green);
      background: var(--green-glow);
      border: 1px solid rgba(34,197,94,0.2);
      padding: 6px 12px;
      border-radius: 99px;
    }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .notification-btn {
      position: relative;
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 50%;
      background: var(--surface2);
      color: var(--text);
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .notification-btn.has-alert {
      background: var(--green-glow);
      color: var(--green);
      box-shadow: 0 0 0 1px rgba(34,197,94,0.18), 0 10px 24px rgba(34,197,94,0.16);
    }
    .notification-btn.ringing {
      animation: notificationRing 0.9s ease;
    }
    .notification-btn .notification-icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      flex-shrink: 0;
    }
    .notification-btn .notification-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: currentColor;
    }
    @keyframes notificationRing {
      0%, 100% { transform: rotate(0deg) scale(1); }
      15% { transform: rotate(-10deg) scale(1.04); }
      30% { transform: rotate(8deg) scale(1.06); }
      45% { transform: rotate(-7deg) scale(1.05); }
      60% { transform: rotate(5deg) scale(1.03); }
      75% { transform: rotate(-3deg) scale(1.02); }
    }
    .notification-count {
      position: absolute;
      top: -4px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 99px;
      background: var(--red);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: none;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--surface);
    }
    .notification-count.show { display: inline-flex; }
    .notification-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 54px;
      width: min(360px, calc(100vw - 32px));
      max-height: 420px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.35);
      padding: 12px;
      display: none;
      z-index: 50;
    }
    .notification-panel.show { display: block; }
    .notification-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding: 4px 4px 10px;
      border-bottom: 1px solid var(--border);
    }
    .notification-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }
    .notification-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .notification-item {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      padding: 12px;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }
    .notification-item:hover {
      border-color: var(--text-dim);
      background: var(--surface2);
    }
    .notification-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 4px;
    }
    .notification-item span {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.35;
    }
    .notification-item {
      display: block;
    }
    .notification-item-main {
      width: 100%;
      border: none;
      background: transparent;
      color: inherit;
      text-align: left;
      padding: 0;
      font-family: inherit;
      cursor: pointer;
    }
    .notification-item-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 8px;
    }
    .notification-item-actions .btn {
      min-height: 26px;
      padding: 4px 8px;
      font-size: 11px;
    }

    .overdue-alert-banner {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(8, 12, 10, 0.54);
      backdrop-filter: blur(4px);
      z-index: 120;
      pointer-events: auto;
    }
    .overdue-alert-banner[hidden] {
      display: none !important;
    }
    .overdue-alert-card {
      width: min(520px, calc(100vw - 32px));
      background: linear-gradient(180deg, rgba(86, 12, 12, 0.98), rgba(46, 8, 8, 0.98));
      border: 1px solid rgba(248, 113, 113, 0.42);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(239, 68, 68, 0.18);
      border-radius: 22px;
      padding: 24px;
      pointer-events: auto;
    }
    .overdue-alert-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #fecaca;
      margin-bottom: 10px;
    }
    .overdue-alert-title {
      font-size: 28px;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -1px;
      color: #fff1f2;
      margin-bottom: 12px;
    }
    .overdue-alert-text {
      font-size: 14px;
      line-height: 1.6;
      color: #ffe4e6;
    }
    .overdue-alert-list {
      margin: 14px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .overdue-alert-item {
      border: 1px solid rgba(254, 202, 202, 0.16);
      background: rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 12px 14px;
    }
    .overdue-alert-item strong {
      display: block;
      font-size: 15px;
      line-height: 1.3;
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px;
    }
    .overdue-alert-task {
      font-size: 32px;
      line-height: 1.1;
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.8px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .overdue-alert-funcionario {
      font-size: 28px;
      line-height: 1.15;
      font-weight: 800;
      color: #ffe4e6;
      letter-spacing: -0.4px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .overdue-alert-horario {
      font-size: 19px;
      line-height: 1.35;
      font-weight: 700;
      color: #fecdd3;
      margin-bottom: 8px;
    }
    .overdue-alert-rodape {
      font-size: 12px;
      line-height: 1.45;
      color: #fecaca;
      opacity: 0.95;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .overdue-alert-item span {
      display: block;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 600;
      color: #ffe4e6;
    }
    .overdue-alert-item ul {
      margin: 0;
      padding-left: 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .overdue-alert-item li {
      font-size: 15px;
      line-height: 1.55;
      font-weight: 600;
      color: #ffe4e6;
    }
    .overdue-alert-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }
    .overdue-alert-actions .btn {
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }
    .ponto-pendente-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(8, 12, 10, 0.56);
      backdrop-filter: blur(4px);
      z-index: 135;
    }
    .ponto-pendente-overlay[hidden] {
      display: none !important;
    }
    .ponto-pendente-card {
      width: min(560px, calc(100vw - 32px));
      background: linear-gradient(180deg, rgba(86, 12, 12, 0.98), rgba(46, 8, 8, 0.98));
      border: 1px solid rgba(248, 113, 113, 0.45);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 68, 68, 0.2);
      border-radius: 20px;
      padding: 22px;
      pointer-events: auto;
    }
    .ponto-pendente-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #fecaca;
      margin-bottom: 10px;
    }
    .ponto-pendente-title {
      font-size: 34px;
      line-height: 1.02;
      font-weight: 900;
      color: #fff1f2;
      letter-spacing: -1px;
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    .ponto-pendente-texto {
      font-size: 16px;
      line-height: 1.5;
      color: #ffe4e6;
      margin-bottom: 12px;
    }
    .ponto-pendente-lista {
      border: 1px solid rgba(254, 202, 202, 0.16);
      background: rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 12px 14px;
      color: #ffe4e6;
      font-size: 14px;
      line-height: 1.45;
      margin-bottom: 14px;
      white-space: pre-line;
    }
    .ponto-pendente-acoes {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .ponto-entrada-alerta-card {
      width: min(520px, calc(100vw - 32px));
      background: linear-gradient(180deg, rgba(127, 29, 29, 0.99), rgba(69, 10, 10, 0.99));
      border: 1px solid rgba(248, 113, 113, 0.72);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.22);
      border-radius: 18px;
      padding: 24px;
      color: #fff1f2;
      pointer-events: auto;
    }
    .ponto-entrada-alerta-title {
      font-size: 30px;
      line-height: 1.05;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .ponto-entrada-alerta-lista {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 14px 0 18px;
    }
    .ponto-entrada-alerta-item {
      border: 1px solid rgba(254, 202, 202, 0.2);
      background: rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 18px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .ponto-entrada-alerta-texto {
      color: #fecaca;
      font-size: 14px;
      line-height: 1.45;
    }
    .ponto-feedback-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(8, 12, 10, 0.5);
      backdrop-filter: blur(3px);
      z-index: 130;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }
    .ponto-feedback-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    .ponto-feedback-overlay[hidden] {
      display: none !important;
    }
    .ponto-feedback-card {
      width: min(760px, calc(100vw - 32px));
      border-radius: 20px;
      border: 1px solid rgba(34, 197, 94, 0.55);
      background: linear-gradient(180deg, rgba(9, 56, 31, 0.97), rgba(6, 36, 20, 0.97));
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(34, 197, 94, 0.22);
      padding: 34px 30px;
      text-align: center;
      color: #f0fdf4;
      font-size: clamp(34px, 5.2vw, 64px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.9px;
      text-transform: uppercase;
    }
    .ponto-feedback-card.parado {
      border-color: rgba(239, 68, 68, 0.55);
      background: linear-gradient(180deg, rgba(86, 12, 12, 0.97), rgba(46, 8, 8, 0.97));
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 68, 68, 0.22);
      color: #fff1f2;
    }

    .content { flex: 1; padding: 20px 22px; overflow-y: auto; background: var(--bg); }
    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 89;
    }

    /* ---- PAGES ---- */
    .pagina { display: none; }
    .pagina.ativa { display: block; }

    .page-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 1px;
    }
    .page-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
    .pagina > .page-title,
    .pagina > .page-sub {
      display: none;
    }

    /* ---- CARDS / GRID ---- */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
    .stat-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      transition: all .2s;
      box-shadow: var(--shadow-sm);
    }
    .stat-card:hover {
      border-color: rgba(240,165,0,0.15);
      box-shadow: 0 4px 20px rgba(240,165,0,0.1);
      transform: translateY(-1px);
    }
    .stat-card .s-label {
      font-size: 10px;
      color: var(--text-dim);
      margin-bottom: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-family: var(--font-mono);
    }
    .stat-card .s-value {
      font-size: 28px;
      font-weight: 700;
      color: var(--accent);
      font-family: var(--font-mono);
    }
    .stat-card .s-desc {
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 6px;
    }
    .rf-total-geral-card {
      border-color: rgba(249, 115, 22, 0.8);
      background: rgba(124, 45, 18, 0.22);
    }
    .rf-total-geral-card .s-label,
    .rf-total-geral-card .s-desc {
      color: #fdba74;
    }
    .rf-total-geral-card .s-value {
      color: #fb923c;
    }
    .rf-saldo-contas-card {
      border-color: rgba(59, 130, 246, 0.62);
      background: rgba(30, 64, 175, 0.16);
    }
    .rf-saldo-contas-card .s-label,
    .rf-saldo-contas-card .s-desc {
      color: #93c5fd;
    }
    .rf-saldo-contas-card .s-value {
      color: #60a5fa;
    }
    button.stat-card {
      width: 100%;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
    }
    button.stat-card:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }
    .rf-falta-quitar-btn {
      border-color: rgba(239, 68, 68, 0.72);
      background: rgba(69, 10, 10, 0.2);
      animation: rfPulseRed 1.05s ease-in-out infinite;
    }
    .rf-falta-quitar-btn .s-label,
    .rf-falta-quitar-btn .s-desc {
      color: #fca5a5;
    }
    .rf-falta-quitar-btn .s-value {
      color: #ef4444;
    }
    .rf-titulos-toggle {
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .rf-titulos-toggle:hover {
      border-color: rgba(34, 197, 94, 0.7);
      transform: translateY(-1px);
    }
    .cofre-overview {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(250px, 1.05fr);
      gap: 10px;
      margin-bottom: 14px;
      align-items: stretch;
    }
    .cofre-overview .stats-grid {
      margin-bottom: 0;
      grid-template-columns: 1fr;
    }
    .cofre-saldo-principal {
      min-height: 172px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
    .cofre-saldo-principal .stat-label {
      font-size: 15px;
      margin-bottom: 12px;
    }
    .cofre-saldo-principal .stat-value {
      font-size: clamp(42px, 4.6vw, 68px);
      line-height: 0.98;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cofre-pizza-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 12px;
      align-items: center;
      min-height: 146px;
      overflow: hidden;
    }
    .cofre-pizza {
      width: 126px;
      height: 126px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.16);
      background: var(--surface2);
      position: relative;
      overflow: hidden;
    }
    .cofre-pizza::after {
      content: '';
      position: absolute;
      inset: 36px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .cofre-pizza-legenda {
      display: grid;
      gap: 7px;
      min-width: 0;
    }
    .cofre-pizza-legenda-item {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      font-size: 12px;
    }
    .cofre-pizza-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .cofre-pizza-nome {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .cofre-pizza-valor {
      font-family: 'DM Mono', monospace;
      color: var(--text);
      font-size: 11px;
    }
    .cofre-necessidade-resumo {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .cofre-necessidade-label {
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .cofre-necessidade-total {
      color: var(--red);
      font-family: 'DM Mono', monospace;
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight: 900;
      line-height: 1;
    }
    .cofre-necessidade-detalhe {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      color: var(--text-muted);
      font-size: 12px;
    }
    .cofre-necessidade-detalhe strong {
      color: var(--text);
      font-family: 'DM Mono', monospace;
      font-size: 11px;
    }
    @media (max-width: 900px) {
      .cofre-overview {
        grid-template-columns: 1fr;
      }
      .cofre-saldo-principal .stat-value {
        font-size: 44px;
      }
      .cofre-pizza-card {
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .cofre-pizza-legenda {
        width: 100%;
      }
    }
    @keyframes rfPulseRed {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
      }
      50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.05);
      }
    }
    .rf-pie-dashboard {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      min-height: 142px;
      margin: 0;
      padding: 10px;
      border: 1px dashed var(--border);
      border-radius: var(--radius-sm);
      background: rgba(0, 0, 0, 0.12);
    }
    .rf-pie {
      width: 124px;
      height: 124px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.16);
      background: var(--surface2);
      position: relative;
      overflow: hidden;
    }
    .rf-pie::after {
      content: '';
      position: absolute;
      inset: 36px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .rf-pie-legenda {
      display: grid;
      gap: 7px;
      min-width: 0;
    }
    .rf-pie-legenda-item {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      font-size: 12px;
    }
    .rf-pie-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .rf-pie-nome {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .rf-pie-valor {
      font-family: 'DM Mono', monospace;
      color: var(--text);
      font-size: 11px;
    }
    .rf-dashboard-pizzas-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }

    /* ---- FORM ---- */
    .card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 10px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all .2s;
    }
    .card:hover {
      border-color: rgba(240,165,0,0.15);
      box-shadow: 0 4px 20px rgba(240,165,0,0.1);
    }
    .card-title {
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-family: var(--font-mono);
    }

    .form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
    .form-row input,
    .form-row select,
    .form-row textarea {
      flex: 1;
      min-width: 120px;
      padding: 8px 12px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 13px;
      font-family: var(--font-sans);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      transition: border-color 0.15s;
    }
    .form-row input:focus,
    .form-row select:focus,
    .form-row textarea:focus { border-color: var(--green); }
    .form-row input::placeholder,
    .form-row textarea::placeholder { color: var(--text-dim); }
    .form-row select option { background: #111; }
    .campo-curto { max-width: 100px; flex: 0 0 100px !important; }
    .form-row input[type="checkbox"] {
      flex: 0 0 auto !important;
      min-width: 16px;
      width: 16px;
      height: 16px;
      padding: 0;
      margin: 0;
    }
    .tarefa-form-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: flex-end;
      margin-bottom: 6px;
    }
    .tarefa-form-row input,
    .tarefa-form-row select {
      width: 100%;
      min-width: 0;
      height: 38px;
      min-height: 38px;
      font-size: 14px;
      padding: 7px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: inherit;
      outline: none;
    }
    #nomeTarefa {
      flex: 1 1 190px;
      min-width: 170px;
    }
    #descTarefa {
      flex: 1.1 1 220px;
      min-width: 190px;
    }
    .tarefa-form-row input:focus,
    .tarefa-form-row select:focus {
      border-color: var(--green);
    }
    .tarefa-form-acoes {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      align-self: end;
      flex: 0 0 auto;
      margin-left: 0;
    }
    .campo-com-label {
      position: relative;
      display: flex;
      flex-direction: column;
      padding-top: 16px;
      min-width: 0;
      flex: 0 0 220px;
      max-width: 220px;
    }
    .campo-com-label .campo-label {
      position: absolute;
      top: 0;
      left: 2px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      pointer-events: none;
    }
    .campo-com-label select {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    .card.card-compact {
      padding-top: 10px;
      padding-bottom: 6px;
    }
    #financeiro_contasapagar .card.card-compact {
      margin-bottom: 8px;
    }
    #financeiro_contasapagar #msgContaAPagarFinanceiro:empty {
      min-height: 0;
      margin-top: 0;
    }
    .financeiro-form-row {
      display: grid;
      grid-template-columns: minmax(260px, 1.3fr) minmax(130px, .55fr) minmax(104px, 112px) minmax(70px, 78px) minmax(86px, 96px);
      gap: 8px;
      align-items: end;
      margin-bottom: 0;
    }
    .financeiro-form-row.financeiro-form-row-secundaria {
      grid-template-columns: minmax(118px, 130px) minmax(118px, 130px) minmax(260px, 1fr) minmax(92px, 104px);
      margin-top: 8px;
    }
    #financeiro_contasapagar .financeiro-form-row .loja {
      min-width: 120px;
    }
    #financeiro_contasapagar .financeiro-form-row .data,
    #financeiro_contasapagar .financeiro-form-row .valor,
    #financeiro_contasapagar .financeiro-form-row .parcela,
    #financeiro_contasapagar .financeiro-form-row .intervalo {
      min-width: 0;
    }
    .financeiro-form-row .campo-com-label {
      max-width: none;
      min-width: 0;
      padding-top: 14px;
    }
    .financeiro-form-row .campo-com-label.fornecedor {
        min-width: 220px;
      }
    .financeiro-form-row .campo-com-label.data .campo-curto,
    .financeiro-form-row .campo-com-label.data input[type="date"] {
      max-width: 100% !important;
      flex: 1 1 auto !important;
    }
    .financeiro-form-row .campo-com-label.intervalo {
      width: auto;
    }
    .financeiro-form-row .campo-com-label .campo-label {
      left: 0;
      top: 0;
      width: 100%;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px;
      text-align: left;
      letter-spacing: .32px;
    }
    .financeiro-form-row .campo-com-label input,
    .financeiro-form-row .campo-com-label select {
      width: 100%;
      min-width: 0;
      height: 34px;
      min-height: 34px;
      max-height: 34px;
      padding: 6px 9px;
      font-size: 13px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .financeiro-form-row .campo-com-label input:focus,
    .financeiro-form-row .campo-com-label select:focus {
      border-color: var(--green);
    }
    /* ── Modal Confirmar Recebimento Futuro: grade própria (a grade padrão de 5 colunas
       estoura a largura do modal e corta os campos) ─────────────────────────────── */
    #modalConfirmarRecFuturo .financeiro-form-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    }
    #modalConfirmarRecFuturo .financeiro-form-row .campo-com-label,
    #modalConfirmarRecFuturo .financeiro-form-row .campo-com-label input,
    #modalConfirmarRecFuturo .financeiro-form-row .campo-com-label select {
      min-width: 0;
      width: 100%;
    }
    #modalConfirmarRecFuturo .campo-curto {
      max-width: 100% !important;
      flex: 1 1 auto !important;
    }
    @media (max-width: 560px) {
      #modalConfirmarRecFuturo .financeiro-form-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .financeiro-form-row .campo-com-label input::placeholder {
      color: var(--text-dim);
    }
    .financeiro-form-row .campo-com-label select option {
      background: #111;
    }
    .financeiro-form-row .btn {
      height: 34px;
      min-height: 34px;
      min-width: 82px;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 12px;
      padding-right: 12px;
      align-self: flex-end;
      justify-self: stretch;
    }
    .financeiro-form-row #btnSalvarContaAPagarFinanceiro {
      grid-column: auto;
      grid-row: auto;
    }
    .financeiro-form-row #btnCancelarContaAPagarFinanceiro {
      grid-column: auto;
      grid-row: auto;
    }
    .financeiro-form-row-secundaria .observacao {
      min-width: 0;
    }
    .financeiro-filtros-row {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(138px, 160px) minmax(72px, 86px);
      align-items: end;
      gap: 6px;
    }
    .financeiro-filtros-row input {
      width: 100%;
      min-width: 0;
    }
    .financeiro-filtros-row input,
    .financeiro-filtros-row select,
    .financeiro-filtros-row .btn {
      height: 32px;
      min-height: 32px;
      padding: 5px 9px;
      font-size: 12px;
      border-radius: 8px;
    }
    .financeiro-filtros-row .btn {
      align-self: end;
      white-space: nowrap;
    }
    .financeiro-filtros-row .campo-curto {
      width: 100% !important;
      min-width: 0;
      max-width: none;
    }
    /* Calendários/datas sempre dentro da página */
    input[type="date"] { min-width: 0; max-width: 100%; }
    @media (max-width: 1400px) {
      input[type="date"] { font-size: 11px; padding-left: 6px; padding-right: 4px; }
    }
    /* Variante flexível da barra de filtros: quebra linha em vez de cortar campos */
    .financeiro-filtros-row.financeiro-filtros-flex {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center;
      gap: 6px;
      row-gap: 6px;
    }
    .financeiro-filtros-row.financeiro-filtros-flex input[type="text"] {
      flex: 1 1 220px;
      min-width: 180px;
      width: auto;
    }
    .financeiro-filtros-row.financeiro-filtros-flex input[type="date"] {
      flex: 0 0 122px;
      width: 122px !important;
      max-width: 122px;
      font-size: 11px;
      padding: 4px 6px;
    }
    .financeiro-filtros-row.financeiro-filtros-flex select.campo-curto {
      flex: 0 0 auto;
      width: auto !important;
      min-width: 116px;
      max-width: 156px;
      font-size: 11px;
    }
    .financeiro-filtros-row.financeiro-filtros-flex .btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    /* Tela "Baixar contas": 6 controles em uma linha sem quebrar/comprimir */
    .financeiro-filtros-baixar {
      display: flex !important;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .financeiro-filtros-baixar #filtroBaixarContaBusca {
      flex: 1 1 240px;
      min-width: 180px;
      max-width: 360px;
    }
    .financeiro-filtros-baixar input[type="date"] {
      flex: 0 0 150px;
      width: 150px !important;
      min-width: 150px;
      max-width: 150px;
    }
    .financeiro-filtros-baixar #filtroBaixarContaStatus {
      flex: 0 0 130px;
      width: 130px !important;
      min-width: 130px;
      max-width: 130px;
    }
    .financeiro-filtros-baixar .btn {
      flex: 0 0 auto;
    }
    .financeiro-selecao-contas-row {
      grid-template-columns: minmax(118px, 150px) minmax(146px, 170px) minmax(0, 1fr);
      align-items: center;
    }
    .financeiro-filtro-compacto {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .financeiro-filtro-compacto label {
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .32px;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .financeiro-card-title-row {
      display: grid;
      grid-template-columns: auto auto repeat(4, minmax(104px, 118px)) minmax(0, 1fr);
      align-items: end;
      justify-content: flex-start;
      gap: 8px;
      margin-bottom: 8px;
    }
    .financeiro-card-title-row .card-title {
      margin-bottom: 0;
      align-self: center;
    }
    .financeiro-card-title-row #btnToggleContasAPagarLista {
      margin-left: 6px;
      border-color: rgba(34, 197, 94, 0.45);
      background: rgba(34, 197, 94, 0.16);
      color: var(--text);
      box-shadow: 0 8px 18px rgba(34, 197, 94, 0.12);
      min-width: 132px;
      height: 30px;
      min-height: 30px;
      padding: 4px 10px;
      font-size: 12px;
      align-self: end;
    }
    .financeiro-card-title-row .financeiro-filtro-compacto input {
      height: 30px;
      min-height: 30px;
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 8px;
    }
    .financeiro-card-title-row .financeiro-filtro-compacto label {
      font-size: 8px;
      letter-spacing: .28px;
    }
    .financeiro-card-title-row #btnToggleContasAPagarLista:hover {
      border-color: rgba(34, 197, 94, 0.72);
      background: rgba(34, 197, 94, 0.24);
    }
    .relatorio-financeiro-filtros {
      display: grid;
      grid-template-columns:
        minmax(120px, 0.85fr)
        minmax(120px, 0.85fr)
        minmax(130px, 1fr)
        minmax(150px, 1.1fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr)
        minmax(150px, 1.1fr);
      grid-auto-rows: auto;
      gap: 8px 8px;
      align-items: end;
      max-width: 100%;
      overflow: visible;
    }
    /* Os dois botões (Filtrar / Hoje) ocupam a última linha alinhados à esquerda */
    .relatorio-financeiro-filtros > .btn {
      grid-column: span 1;
      align-self: end;
    }
    .relatorio-financeiro-filtros .campo-com-label {
      max-width: none;
      min-width: 0;
      flex: initial;
      padding-top: 17px;
      position: relative;
    }
    .relatorio-financeiro-filtros .campo-label {
      left: 0;
      width: 100%;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 11px;
      text-align: left;
    }
    .relatorio-financeiro-filtros input,
    .relatorio-financeiro-filtros select {
      width: 100%;
      min-width: 0;
      height: 38px;
      min-height: 38px;
      max-height: 38px;
      padding: 7px 9px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .relatorio-financeiro-filtros input:focus,
    .relatorio-financeiro-filtros select:focus {
      border-color: var(--green);
    }
    .relatorio-financeiro-filtros input::placeholder {
      color: var(--text-dim);
    }
    .relatorio-financeiro-filtros select option {
      background: #111;
      color: var(--text);
    }
    .relatorio-check-filter {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      z-index: 20;
    }
    .relatorio-check-filter.is-open {
      z-index: 80;
    }
    .relatorio-check-filter-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 16px;
      align-items: center;
      width: 100%;
      height: 38px;
      min-height: 38px;
      max-height: 38px;
      padding: 7px 9px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      cursor: text;
      box-sizing: border-box;
      outline: none;
    }
    .relatorio-check-filter-head:hover,
    .relatorio-check-filter.is-open .relatorio-check-filter-head {
      border-color: var(--green);
    }
    .relatorio-check-filter-query {
      width: 100% !important;
      height: 24px !important;
      min-height: 24px !important;
      max-height: 24px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--text) !important;
      box-shadow: none !important;
      outline: none !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      text-align: center;
      line-height: 24px !important;
      min-width: 0;
    }
    .relatorio-check-filter-query::placeholder {
      color: var(--text) !important;
      opacity: 1;
    }
    .relatorio-check-filter-summary {
      display: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }
    .relatorio-check-filter-arrow {
      color: var(--text-muted);
      font-size: 11px;
      text-align: right;
    }
    .relatorio-check-filter-panel {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 220px;
      min-width: 210px;
      max-height: 244px;
      padding: 6px;
      border: 1px solid rgba(71, 85, 105, 0.95);
      border-radius: 9px;
      background: #0b0f16;
      box-shadow: 0 18px 42px rgba(0,0,0,.42);
      overflow: hidden;
      z-index: 99999;
    }
    .relatorio-check-filter.is-open .relatorio-check-filter-panel {
      display: grid;
      gap: 5px;
    }
    .relatorio-check-filter-search {
      width: 100%;
      height: 30px !important;
      min-height: 30px !important;
      max-height: 30px !important;
      padding: 5px 8px !important;
      border-radius: 7px !important;
      font-size: 11px !important;
    }
    .relatorio-check-filter-options {
      display: grid;
      gap: 3px;
      max-height: 196px;
      overflow-y: auto;
      padding-right: 2px;
    }
    .relatorio-check-filter-options label[hidden] {
      display: none !important;
    }
    .relatorio-check-filter label {
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 4px 6px;
      border-radius: 7px;
      color: var(--text);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
    }
    .relatorio-check-filter label:hover {
      background: rgba(34,197,94,0.08);
    }
    .relatorio-check-filter label span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .relatorio-check-filter input {
      width: 13px;
      height: 13px;
      min-width: 13px;
      accent-color: var(--green);
    }
    .relatorio-financeiro-filtros .btn {
      height: 38px;
      min-height: 38px;
      min-width: 0;
      padding: 0 12px;
      white-space: nowrap;
    }
    .relatorio-financeiro-acoes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .relatorio-financeiro-atalho {
      border-color: rgba(34, 197, 94, 0.22);
      background: rgba(34, 197, 94, 0.08);
      color: var(--text);
    }
    .btn-export-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 17px;
      margin-right: 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      color: #fff;
      letter-spacing: 0;
    }
    .btn-export-excel {
      border-color: rgba(22, 163, 74, 0.4);
      background: rgba(22, 163, 74, 0.12);
    }
    .btn-export-excel .btn-export-icon {
      background: #107c41;
    }
    .btn-export-pdf {
      border-color: rgba(220, 38, 38, 0.46);
      background: rgba(220, 38, 38, 0.12);
    }
    .btn-export-pdf .btn-export-icon {
      background: #d71920;
      font-size: 9px;
    }
    @media (max-width: 1200px) {
      .financeiro-form-row {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
      }
      .financeiro-form-row.financeiro-form-row-secundaria {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
      }
      .financeiro-form-row .campo-com-label.fornecedor,
      .financeiro-form-row .campo-com-label.data,
      .financeiro-form-row .campo-com-label.valor,
      .financeiro-form-row .campo-com-label.parcela,
      .financeiro-form-row .campo-com-label.intervalo {
        grid-column: auto;
        grid-row: auto;
        width: auto;
      }
      .financeiro-form-row #btnSalvarContaAPagarFinanceiro,
      .financeiro-form-row #btnCancelarContaAPagarFinanceiro {
        grid-column: auto;
        grid-row: auto;
      }
      .financeiro-form-row-secundaria .observacao {
        grid-column: 1 / -1;
      }
      .financeiro-filtros-row {
        flex-wrap: wrap;
      }
      .financeiro-filtros-row .campo-curto {
        flex: 1 1 180px !important;
        min-width: 180px;
        max-width: 100%;
      }
      .relatorio-financeiro-filtros {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
      }
      .relatorio-financeiro-filtros .btn {
        width: 100%;
      }
    }
    @media (max-width: 768px) {
      #financeiro_contasapagar .card {
        padding: 12px;
        border-radius: 10px;
      }
      #financeiro_contasapagar .card-title {
        margin-bottom: 8px;
        font-size: 12px;
      }
      .financeiro-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }
      .financeiro-form-row .campo-com-label {
        padding-top: 15px;
      }
      .financeiro-form-row .campo-com-label.fornecedor,
      .financeiro-form-row .campo-com-label.observacao-mobile,
      .financeiro-form-row-secundaria .observacao,
      .financeiro-form-row #btnSalvarContaAPagarFinanceiro,
      .financeiro-form-row #btnCancelarContaAPagarFinanceiro {
        grid-column: 1 / -1;
      }
      .financeiro-form-row .campo-com-label .campo-label {
        text-align: left;
        padding-right: 8px;
      }
      .financeiro-form-row .campo-com-label input,
      .financeiro-form-row .campo-com-label select,
      .financeiro-observacao-row input,
      .financeiro-filtros-row input,
      .financeiro-filtros-row select {
        min-height: 44px;
        height: 44px;
        font-size: 16px;
      }
      .financeiro-form-row .btn,
      .financeiro-filtros-row .btn {
        min-height: 44px;
        height: 44px;
        font-size: 15px;
      }
      .financeiro-observacao-row {
        margin-top: 9px !important;
      }
      .financeiro-observacao-row input {
        width: 100%;
      }
      .financeiro-filtros-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      #financeiro_contasapagar .financeiro-card-title-row {
        align-items: stretch;
        gap: 8px;
      }
      #financeiro_contasapagar .financeiro-card-title-row #btnToggleContasAPagarLista {
        margin-left: auto;
        min-width: 132px;
        min-height: 40px;
      }
      .relatorio-financeiro-filtros {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .financeiro-filtros-row input,
      .financeiro-filtros-row .campo-curto,
      .financeiro-filtros-row .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto !important;
      }
      #listaContasAPagarFinanceiro .item,
      #listaBaixarContasFinanceiro .item {
        padding: 12px;
        gap: 10px;
      }
      #listaContasAPagarFinanceiro .item-detalhe,
      #listaBaixarContasFinanceiro .item-detalhe {
        line-height: 1.45;
      }
      #listaContasAPagarFinanceiro .item-actions {
        width: 100%;
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #listaContasAPagarFinanceiro .item-actions .tag,
      #listaContasAPagarFinanceiro .item-actions .btn {
        width: 100%;
        min-height: 40px;
        justify-content: center;
      }
      .baixar-contas-atalhos,
      .baixar-contas-resumo {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 540px) {
      #financeiro_contasapagar .card.card-compact {
        padding: 10px;
      }
      .financeiro-form-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .financeiro-form-row .campo-com-label,
      .financeiro-form-row #btnSalvarContaAPagarFinanceiro,
      .financeiro-form-row #btnCancelarContaAPagarFinanceiro {
        grid-column: auto;
      }
      .financeiro-form-row .campo-com-label .campo-label {
        font-size: 10px;
      }
      .financeiro-form-row .campo-com-label input,
      .financeiro-observacao-row input {
        height: 46px;
        min-height: 46px;
      }
      .financeiro-form-row #btnSalvarContaAPagarFinanceiro,
      .financeiro-form-row #btnCancelarContaAPagarFinanceiro {
        width: 100%;
        min-height: 48px;
      }
      #financeiro_contasapagar .financeiro-card-title-row {
        flex-direction: column;
      }
      #financeiro_contasapagar .financeiro-card-title-row #btnToggleContasAPagarLista {
        margin-left: 0;
        width: 100%;
      }
      #listaContasAPagarFinanceiro .item {
        align-items: stretch;
      }
      #listaContasAPagarFinanceiro .item-actions {
        grid-template-columns: 1fr 1fr;
      }
      #listaContasAPagarFinanceiro .item-actions .tag {
        grid-column: 1 / -1;
      }
      #financeiro_contasapagar .page-sub {
        line-height: 1.4;
      }
    }
    .funcionario-form-row {
      display: grid;
      grid-template-columns: repeat(14, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
    }
    .funcionario-form-row > :nth-child(1),
    .funcionario-form-row > :nth-child(2) {
      min-width: 0;
    }
    .funcionario-form-row > :nth-child(3),
    .funcionario-form-row > :nth-child(4),
    .funcionario-form-row > :nth-child(5) {
      min-width: 0;
    }
    .funcionario-form-row > :nth-child(6),
    .funcionario-form-row > :nth-child(7) {
      min-width: 0;
    }
    .funcionario-form-row > :nth-child(8),
    .funcionario-form-row > :nth-child(9) {
      min-width: 0;
    }
    .funcionario-form-row > :nth-child(1) { grid-column: 1 / span 7; }
    .funcionario-form-row > :nth-child(2) { grid-column: 8 / span 7; }
    .funcionario-form-row > :nth-child(3) { grid-column: 1 / span 2; }
    .funcionario-form-row > :nth-child(4) { grid-column: 3 / span 2; }
    .funcionario-form-row > :nth-child(5) { grid-column: 5 / span 2; }
    .funcionario-form-row > :nth-child(6) { grid-column: 7 / span 2; }
    .funcionario-form-row > :nth-child(7) { grid-column: 9 / span 4; }
    .funcionario-form-row > :nth-child(8) { grid-column: 13 / span 1; }
    .funcionario-form-row > :nth-child(9) { grid-column: 14 / span 1; }
    .funcionario-form-row .campo-com-label {
      position: static;
      padding-top: 0;
      min-width: 0;
      max-width: none;
    }
    .funcionario-form-row .campo-com-label .campo-label {
      position: static;
      display: block;
      margin: 0 0 4px 2px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      pointer-events: auto;
    }
    .funcionario-form-row .campo-com-label input,
    .funcionario-form-row .campo-com-label select {
      width: 100%;
      height: 36px;
      min-height: 36px;
      font-size: 13px;
      padding: 6px 8px;
    }
    .funcionario-form-row .campo-com-label .campo-curto {
      max-width: none !important;
      flex: 0 0 auto !important;
    }
    .funcionario-form-row #btnSalvarFuncionario,
    .funcionario-form-row #btnCancelarEdicaoFuncionario {
      height: 36px;
      min-height: 36px;
      padding: 0 12px;
      align-self: end;
      white-space: nowrap;
    }
    .funcionario-intervalos-card {
      grid-column: 1 / -1;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(8, 14, 11, 0.72);
      padding: 10px;
    }
    .funcionario-intervalos-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .funcionario-intervalos-ajuda {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.35;
      margin-top: 3px;
    }
    .funcionario-intervalos-resumo {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
      min-height: 22px;
    }
    .funcionario-intervalos-resumo .tag {
      font-size: 11px;
      padding: 4px 7px;
    }
    .funcionario-intervalos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 7px;
      margin-top: 10px;
    }
    .funcionario-intervalo-dia {
      border: 1px solid rgba(107,143,112,0.18);
      border-radius: 8px;
      padding: 9px;
      background: rgba(17,26,20,0.72);
      min-width: 0;
    }
    .funcionario-intervalo-dia-titulo {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 5px;
    }
    .funcionario-intervalo-dia-vazio {
      font-size: 12px;
      color: var(--text-dim);
      padding: 6px 0;
    }
    .funcionario-intervalo-inputs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .funcionario-intervalo-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: end;
    }
    .funcionario-intervalo-input-wrap {
      min-width: 0;
    }
    .funcionario-intervalo-input-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      margin: 0 0 3px 2px;
    }
    .funcionario-intervalo-input-row input {
      min-width: 0;
      height: 30px !important;
      min-height: 30px !important;
      padding: 5px 7px !important;
    }
    .funcionario-intervalo-input-row .btn {
      width: auto;
      min-width: 62px;
      height: 30px;
      min-height: 30px;
      padding: 0 8px;
      font-size: 11px;
    }
    .funcionario-cadastro-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .funcionario-cadastro-header .item-detalhe {
      margin-top: 4px;
    }
    .funcionario-cadastro-header #btnToggleCadastroFuncionario {
      white-space: nowrap;
    }
    #cadastroFuncionarioConteudo[hidden] {
      display: none !important;
    }
    #btnSalvarTarefa,
    #btnCancelarEdicaoTarefa {
      height: 38px;
      padding: 0 10px;
      min-width: 96px;
      font-size: 14px;
    }
    #tarefas .card {
      margin-bottom: 10px;
      padding-top: 16px;
      padding-bottom: 16px;
    }
    #msgTarefas {
      min-height: 0;
      margin-top: 6px;
    }
    .dias-semana-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .dias-semana-acoes {
      display: flex;
      gap: 8px;
      margin-left: 0;
      margin-bottom: 0;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .dias-semana-linha {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .dias-semana-checks {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      flex: 0 1 auto;
      min-width: auto;
    }
    .dias-semana-linha .dias-semana-acoes {
      margin-left: 6px;
      flex-shrink: 0;
    }
    .dias-semana-acoes .btn:first-child {
      border: 1px solid rgba(34, 197, 94, 0.45);
      background: rgba(34, 197, 94, 0.18);
      color: #ddffe9;
    }
    .dias-semana-acoes .btn:first-child:hover {
      background: rgba(34, 197, 94, 0.28);
      border-color: rgba(34, 197, 94, 0.55);
    }
    .dias-semana-acoes .btn:last-child {
      border: 1px solid rgba(245, 158, 11, 0.45);
      background: rgba(245, 158, 11, 0.18);
      color: #ffe7b8;
    }
    .dias-semana-acoes .btn:last-child:hover {
      background: rgba(245, 158, 11, 0.28);
      border-color: rgba(245, 158, 11, 0.55);
    }


    /* ---- AJUSTES FINAIS PONTO ADM / RELATÓRIO ---- */
    .ponto-ajuste-tipo-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .ponto-ajuste-tipo-opcao {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      font-weight: 700;
    }
    .ponto-ajuste-tipo-opcao.ativo {
      border-color: rgba(34, 197, 94, 0.55);
      background: rgba(34, 197, 94, 0.14);
      color: var(--text);
    }
    .ponto-ajustado-admin {
      border-color: rgba(245, 158, 11, 0.55) !important;
      background: rgba(245, 158, 11, 0.08) !important;
      box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.9);
    }
    .ponto-ajuste-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      margin-top: 5px;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid rgba(245, 158, 11, 0.4);
      background: rgba(245, 158, 11, 0.13);
      color: #fbbf24;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.25px;
      line-height: 1.15;
      max-width: 100%;
      white-space: normal;
    }
    .ponto-ajuste-historico {
      margin-top: 5px;
      font-size: 10px;
      color: #fcd34d;
      line-height: 1.28;
      max-width: 520px;
      white-space: normal;
      word-break: break-word;
    }
    .ponto-ajuste-historico strong {
      color: #fde68a;
      font-weight: 800;
    }
    .ponto-ajuste-historico .ponto-ajuste-linha {
      display: block;
      margin-top: 2px;
    }
    .relatorio-ponto-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .relatorio-ponto-title-row .card-title { margin-bottom: 0; }
    .relatorio-ponto-acoes {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .relatorio-ponto-body[hidden] { display: none !important; }
    .btn-export-icon.excel { background: #107c41; }
    .btn-export-icon.pdf { background: #d71920; }

    /* ---- PONTO: REGISTRO E AJUSTES ---- */

    .ponto-resumo-lista {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ponto-resumo-linha {
      display: grid;
      grid-template-columns: minmax(150px, 0.85fr) minmax(360px, 2.5fr) minmax(150px, 0.7fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(10, 15, 13, 0.72);
    }
    .ponto-resumo-nome {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ponto-resumo-sequencia {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }
    .ponto-resumo-sequencia .ponto-ajuste-historico {
      flex: 0 0 100%;
      width: 100%;
      margin: 0 0 2px 0;
      line-height: 1.15;
    }
    .ponto-resumo-sequencia .ponto-ajuste-badge {
      flex: 0 0 100%;
      margin: 0 0 1px 0;
      padding: 0;
      border: none;
      background: transparent;
      color: #fbbf24;
      font-size: 10px;
      line-height: 1.05;
      border-radius: 0;
    }
    .ponto-resumo-sequencia .ponto-ajuste-linha {
      display: block;
      font-size: 10px;
      line-height: 1.15;
    }
    .ponto-periodo-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid rgba(107, 143, 112, 0.22);
      background: rgba(24, 34, 24, 0.72);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .ponto-periodo-chip.aberto {
      border-color: rgba(34, 197, 94, 0.48);
      background: rgba(34, 197, 94, 0.12);
      color: #bbf7d0;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08);
    }
    .ponto-hora-entrada {
      color: #86efac;
      font-family: 'DM Mono', monospace;
    }
    .ponto-hora-saida {
      color: #fcd34d;
      font-family: 'DM Mono', monospace;
    }
    .ponto-hora-aberto {
      color: #22c55e;
      font-family: 'DM Mono', monospace;
      animation: pulse 1.2s ease-in-out infinite;
    }
    .ponto-resumo-metricas {
      display: flex;
      flex-direction: column;
      gap: 3px;
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.25;
      min-width: 0;
    }
    .ponto-resumo-metricas strong {
      color: var(--green);
      font-family: 'DM Mono', monospace;
      font-size: 13px;
    }
    .ponto-resumo-tag {
      justify-self: end;
      white-space: nowrap;
    }
    @media (max-width: 980px) {
      .ponto-resumo-linha {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .ponto-resumo-tag {
        justify-self: start;
      }
      .ponto-resumo-nome {
        white-space: normal;
      }
    }

    #bater_ponto .ponto-registro-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #bater_ponto .ponto-topo-grid {
      display: grid;
      grid-template-columns: minmax(420px, 1fr) minmax(320px, 420px);
      gap: 10px;
      align-items: stretch;
      margin-bottom: 10px;
    }
    #bater_ponto .ponto-topo-grid > .card {
      margin-bottom: 0;
    }
    #bater_ponto .ponto-topo-grid .ponto-tempo-aviso-card {
      min-height: 100%;
    }
    #bater_ponto .ponto-tempo-aviso-card {
      border-color: rgba(245, 158, 11, 0.28);
      background: rgba(245, 158, 11, 0.045);
    }
    #bater_ponto .ponto-tempo-aviso-card[hidden] {
      display: none !important;
    }
    #bater_ponto .ponto-tempo-aviso-card {
      padding: 12px 14px;
    }
    #bater_ponto .ponto-tempo-aviso-row {
      display: grid;
      grid-template-columns: minmax(180px, 230px) auto auto minmax(120px, 1fr);
      gap: 8px;
      align-items: end;
      justify-content: start;
    }
    #bater_ponto .ponto-tempo-aviso-row select,
    #bater_ponto .ponto-tempo-aviso-row input {
      width: 100%;
      min-height: 38px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      padding: 8px 10px;
      font-family: inherit;
      outline: none;
    }
    #bater_ponto .ponto-tempo-aviso-row select:focus,
    #bater_ponto .ponto-tempo-aviso-row input:focus {
      border-color: var(--green);
    }
    #bater_ponto .ponto-tempo-aviso-status {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      min-height: 38px;
      color: var(--text-muted);
      font-size: 12px;
      white-space: nowrap;
    }
    #bater_ponto .ponto-tempo-aviso-valor {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(34, 197, 94, 0.22);
      background: rgba(34, 197, 94, 0.08);
      color: var(--text-muted);
      font-weight: 700;
    }
    #bater_ponto .ponto-tempo-aviso-valor strong {
      color: var(--green);
      font-family: 'DM Mono', monospace;
      font-size: 13px;
    }
    #bater_ponto .ponto-tempo-info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(245, 158, 11, 0.95);
      color: #1f1300;
      border: 1px solid rgba(245, 158, 11, 0.55);
      font-weight: 900;
      font-size: 12px;
      cursor: help;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    }
    #bater_ponto .ponto-tempo-aviso-help {
      display: none;
    }
    .ponto-resumo-linha.em-intervalo-destaque {
      border-color: rgba(245, 158, 11, 0.55);
      background: rgba(245, 158, 11, 0.075);
      box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.9);
    }
    .ponto-retorno-destaque {
      margin-top: 6px;
      padding: 8px 10px;
      border: 1px solid rgba(239, 68, 68, 0.62);
      border-radius: 10px;
      background: rgba(127, 29, 29, 0.18);
      display: grid;
      gap: 4px;
      max-width: 210px;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.10), 0 8px 18px rgba(239, 68, 68, 0.10);
    }
    .ponto-retorno-destaque .retorno-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      color: #fecaca;
    }
    .ponto-retorno-destaque .retorno-contador {
      font-size: clamp(18px, 1.7vw, 26px);
      line-height: 1;
      font-weight: 950;
      font-family: 'DM Mono', monospace;
      color: #ef4444;
      text-shadow: 0 0 18px rgba(239, 68, 68, 0.28);
    }
    .ponto-retorno-destaque.atrasado {
      border-color: rgba(239, 68, 68, 0.86);
      background: rgba(127, 29, 29, 0.28);
      animation: rfPulseRed 1.05s ease-in-out infinite;
    }
    .ponto-retorno-destaque.atrasado .retorno-label,
    .ponto-retorno-destaque.atrasado .retorno-contador {
      color: #fca5a5;
    }
    .ponto-retorno-detalhe {
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.25;
    }
    @media (max-width: 980px) {
      #bater_ponto .ponto-topo-grid {
        grid-template-columns: 1fr;
      }
      #bater_ponto .ponto-tempo-aviso-row {
        grid-template-columns: 1fr;
      }
      #bater_ponto .ponto-tempo-aviso-row .btn {
        width: 100%;
      }
    }
    #pontoPinInput {
      flex: 0 1 240px !important;
      min-width: 210px !important;
      max-width: 280px !important;
      height: 44px;
      min-height: 44px;
      font-size: 18px;
      letter-spacing: 4px;
      text-align: center;
      font-family: 'DM Mono', monospace;
    }
    .ponto-ajuste-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(8, 12, 10, 0.62);
      backdrop-filter: blur(4px);
    }
    .ponto-ajuste-modal-overlay[hidden] {
      display: none !important;
    }
    .ponto-ajuste-modal-card {
      width: min(640px, calc(100vw - 28px));
      max-height: none;
      overflow: visible;
      background: var(--surface);
      border: 1px solid rgba(34, 197, 94, 0.28);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    }
    .ponto-ajuste-modal-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }
    .ponto-ajuste-modal-sub {
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .ponto-ajuste-form {
      display: grid;
      gap: 10px;
    }
    .ponto-ajuste-form label {
      display: grid;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }
    .ponto-ajuste-form label[hidden] {
      display: none !important;
    }
    .ponto-ajuste-form input,
    .ponto-ajuste-form textarea,
    .ponto-ajuste-form select {
      width: 100%;
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      font-family: inherit;
      font-size: 14px;
      outline: none;
    }
    .ponto-ajuste-form select option {
      background: var(--bg);
      color: var(--text);
    }
    .ponto-ajuste-form textarea {
      min-height: 84px;
      resize: vertical;
    }
    .ponto-ajuste-form input:focus,
    .ponto-ajuste-form textarea:focus,
    .ponto-ajuste-form select:focus {
      border-color: var(--green);
    }
    .ponto-ajuste-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .ponto-ajustes-filtros {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .ponto-ajustes-filtros select,
    .ponto-ajustes-filtros input {
      flex: 1 1 160px;
      min-width: 150px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      font-family: inherit;
    }
    @media (max-width: 640px), (hover: none) and (pointer: coarse) {
      #bater_ponto .ponto-registro-row {
        display: grid;
        grid-template-columns: 1fr;
      }
      #pontoPinInput,
      #bater_ponto .ponto-registro-row .btn {
        width: 100% !important;
        max-width: 100% !important;
      }

      .ponto-ajuste-modal-overlay {
        align-items: flex-start;
        padding: 8px;
      }
      .ponto-ajuste-modal-card {
        width: calc(100vw - 16px);
        margin-top: 8px;
        border-radius: 14px;
        padding: 14px;
        max-height: calc(100dvh - 20px);
        overflow: hidden;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-modal-sub {
        display: none;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-form {
        gap: 8px;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-form label {
        gap: 4px;
        font-size: 10px;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-form input,
      #modalSolicitarAjustePonto .ponto-ajuste-form textarea,
      #modalSolicitarAjustePonto .ponto-ajuste-form select {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
      }
      #modalSolicitarAjustePonto #ajustePontoMotivo {
        min-height: 64px;
        resize: none;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-actions {
        margin-top: 2px;
      }
      #modalSolicitarAjustePonto .ponto-ajuste-actions .btn {
        flex: 1;
      }
    }

    /* ---- BUTTONS ---- */
    .btn {
      border: 1px solid transparent;
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-sans);
      transition: all .18s ease;
      white-space: nowrap;
      min-height: 34px;
      position: relative;
      overflow: hidden;
    }
    .btn-green {
      background: var(--green);
      color: #000;
      border: 1px solid var(--green-dim);
      box-shadow: 0 2px 10px rgba(34,214,122,0.25);
    }
    .btn-green:hover {
      background: #2de885;
      box-shadow: 0 4px 16px rgba(34,214,122,0.4);
      transform: translateY(-1px);
      border-color: #1db265;
    }
    .btn-red {
      background: transparent;
      color: var(--red);
      border: 1px solid rgba(240,62,90,0.3);
      padding: 6px 10px;
      font-size: 12px;
    }
    .btn-red:hover {
      background: rgba(240,62,90,0.08);
      border-color: var(--red);
      color: #ff5677;
    }
    .btn-amber {
      background: transparent;
      color: var(--accent);
      border: 1px solid rgba(240,165,0,0.3);
      padding: 6px 10px;
      font-size: 12px;
    }
    .btn-amber:hover {
      background: var(--accent-subtle);
      border-color: var(--accent);
      color: var(--accent-bright);
    }
    .btn-ghost {
      background: var(--surface3);
      color: var(--text-soft);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover {
      background: var(--surface4);
      border-color: var(--border-bright);
      color: var(--text);
    }
    .btn-sm { padding: 5px 10px; font-size: 11px; min-height: 30px; }
    .btn-icon {
      min-width: 36px;
      width: 36px;
      height: 32px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
    }
    .btn-icon-danger {
      color: #ffb4b4;
      border-color: rgba(239,68,68,0.45);
    }
    .btn-icon-danger:hover {
      background: rgba(239,68,68,0.12);
    }
    .btn-icon-success {
      color: #ddffe9;
      border-color: rgba(34, 197, 94, 0.45);
      background: rgba(34, 197, 94, 0.18);
    }
    .btn-icon-success:hover {
      background: rgba(34, 197, 94, 0.28);
    }

    /* ---- LIST ITEMS ---- */
    .lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
    .item-relatorio-excluido {
      border-color: rgba(239,68,68,0.32);
      background: linear-gradient(180deg, rgba(52, 18, 18, 0.94), rgba(28, 12, 12, 0.94));
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.08);
    }
    .item-relatorio-excluido .item-nome {
      color: #ffb4b4;
    }
    .rf-alerta-excluidos {
      margin-bottom: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(239,68,68,0.28);
      background: rgba(86, 19, 19, 0.32);
      color: #ffd7d7;
      font-size: 13px;
    }
    #listaTarefas .lista {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
      gap: 8px;
    }
    .tarefas-filtros-row {
      margin: 0 0 8px;
      gap: 8px;
    }
    .tarefas-filtros-row input {
      min-width: 190px;
      max-width: 340px;
      flex: 1 1 240px;
    }
    .tarefas-filtros-row .btn {
      padding: 8px 12px;
      min-height: 36px;
      font-size: 13px;
    }
    .tarefas-filtro-avancado {
      margin: 4px 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface2, rgba(255,255,255,.02));
      padding: 4px 10px;
    }
    .tarefas-filtro-avancado > summary {
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      padding: 4px 0;
      user-select: none;
    }
    .tarefas-filtro-avancado-corpo {
      padding: 8px 0 4px;
    }
    .tarefas-filtro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px 10px;
      margin-bottom: 10px;
    }
    .tarefas-filtro-grid .campo-com-label {
      max-width: none;
      flex: none;
    }
    .tarefas-filtro-grid input,
    .tarefas-filtro-grid select {
      width: 100%;
      box-sizing: border-box;
    }
    .tarefas-filtro-acoes-massa {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .tarefa-cadastro-atalhos {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      margin: 2px 0 8px;
    }
    #tarefaItensBuilderCard[hidden] {
      display: none !important;
    }
    .tarefas-consulta-box {
      border: 1px solid rgba(107, 143, 112, 0.2);
      border-radius: var(--radius-sm);
      padding: 10px;
      margin-bottom: 10px;
      background: rgba(12, 20, 16, 0.55);
    }
    .tarefas-consulta-lista {
      max-height: 320px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(8, 15, 11, 0.9);
      padding: 6px;
      margin-top: 6px;
    }
    .tarefas-consulta-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px 10px;
      padding: 7px 8px;
      border-radius: 8px;
      border: 1px solid transparent;
    }
    .tarefas-consulta-item:hover {
      background: rgba(24, 34, 24, 0.7);
      border-color: rgba(107, 143, 112, 0.22);
    }
    .tarefas-consulta-item-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .tarefas-consulta-item-main-texto {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tarefas-consulta-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }
    .tarefas-consulta-item-nome {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tarefas-consulta-item-descricao {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tarefas-consulta-item-descricao.vazia {
      color: rgba(133, 159, 141, 0.78);
      font-style: italic;
    }
    .tarefas-consulta-item-acoes {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: auto;
    }
    .tarefas-consulta-item-config {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 10px;
      padding: 8px;
      margin-top: 2px;
      grid-column: 1 / -1;
    }
    .tarefa-lancar-mobile-wrap {
      display: none;
    }
    .btn-lancar-mobile-destaque {
      display: none;
      background: #0e3a8a;
      color: #e6efff;
      border: 1px solid #1e40af;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(14, 58, 138, 0.32);
    }
    .btn-lancar-mobile-destaque:hover {
      background: #1e3a8a;
    }
    @media (max-width: 1280px) and (min-width: 901px) {
      #tarefas .tarefa-lancamento-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(120px, 0.55fr) minmax(140px, 0.55fr) minmax(160px, 0.46fr) minmax(100px, 0.26fr);
        gap: 6px;
        align-items: end;
      }
      #tarefas .tarefa-dias-checks,
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionarios-grid {
        gap: 3px;
        overflow: hidden;
      }
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option {
        min-height: 28px;
        padding: 3px 5px !important;
        font-size: 11px;
      }
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option span {
        font-size: 11px;
      }
      #tarefas .tarefa-lancamento-bloco-horario {
        max-width: 178px;
        margin-left: 0;
      }
      #tarefas .tarefa-lancamento-horario {
        min-width: 148px;
        min-height: 44px;
        padding: 5px 8px;
      }
      #tarefas .tarefa-lancamento-horario input[type="time"] {
        width: 152px;
        min-width: 152px;
        height: 30px;
        font-size: 13px;
      }
      #tarefas .tarefa-lancamento-bloco-funcionarios,
      #tarefas .tarefa-lancamento-bloco-lancar,
      #tarefas .tarefa-lancamento-bloco-horario {
        align-self: end;
      }
    }
    .btn-lancar-topo.is-hidden {
      display: none;
    }
    @media (max-width: 900px) {
      .tarefas-consulta-item {
        grid-template-columns: 1fr;
      }
      .tarefas-consulta-item-acoes {
        justify-content: flex-start;
        margin-left: 0;
      }
      #tarefas .tarefas-consulta-item-acoes .btn-lancar-topo {
        display: none;
      }
      #tarefas .tarefa-lancar-mobile-wrap {
        display: block;
        position: sticky;
        bottom: 0;
        margin-top: 8px;
        padding-top: 8px;
        background: linear-gradient(180deg, rgba(7, 15, 12, 0), rgba(7, 15, 12, 0.95) 38%);
        z-index: 2;
      }
      #tarefas .tarefa-lancar-mobile-wrap .btn-lancar-mobile-destaque {
        display: block;
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        border-radius: 12px;
      }
      #tarefas .tarefa-lancamento-bloco-lancar {
        display: none;
      }
    }
    .btn-fav-star {
      min-width: 30px;
      width: 30px;
      height: 30px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 1;
      color: #fcd34d;
    }
    .btn-fav-star.inativo {
      color: #6b8f70;
    }
    .item-actions .btn-fav-star {
      width: 30px !important;
      min-width: 30px !important;
      padding: 0 !important;
    }
    .tarefas-favoritas-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 6px 0;
    }
    .tarefas-favoritas-titulo {
      font-size: 11px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 700;
    }
    .tarefa-itens-builder {
      margin-top: 8px;
      padding: 10px;
      border: 1px dashed rgba(34, 197, 94, 0.28);
      border-radius: var(--radius-sm);
      background: rgba(10, 22, 18, 0.45);
    }
    .tarefa-itens-builder-topo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .tarefa-itens-builder-topo .item-detalhe {
      margin-top: 0;
    }
    .tarefa-itens-builder .form-row {
      margin-bottom: 8px;
    }
    .tarefa-itens-builder-lista .item {
      padding: 7px 10px;
    }
    .tarefa-itens-builder-lista .item-nome {
      font-size: 12px;
    }
    .tarefa-itens-builder-lista .item-detalhe {
      font-size: 10px;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 9px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: border-color 0.15s;
    }
    .item:hover { border-color: var(--text-dim); }
    .item-info { flex: 1; min-width: 0; }
    .item-nome { font-size: 13px; font-weight: 600; }
    .alerta-rapido-card {
      align-items: stretch;
      border-color: rgba(245, 158, 11, 0.24);
      background: linear-gradient(135deg, rgba(52, 36, 12, 0.88), rgba(20, 20, 18, 0.96));
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .alerta-rapido-funcionario-grande {
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fde68a;
      margin-bottom: 8px;
    }
    .alerta-rapido-mensagem-grande {
      font-size: clamp(18px, 2.4vw, 26px);
      font-weight: 700;
      line-height: 1.2;
      color: #fff7ed;
    }
    .item-detalhe {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.35;
    }
    .tarefa-funcionarios-inline {
      margin-top: 4px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    .tarefa-launch-details {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 12px;
      overflow: hidden;
    }
    .tarefa-launch-details summary {
      list-style: none;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-muted);
      padding: 8px 10px;
      user-select: none;
      border-bottom: 1px solid transparent;
    }
    .tarefa-launch-details summary::-webkit-details-marker {
      display: none;
    }
    .tarefa-launch-details[open] summary {
      border-bottom-color: var(--border);
    }
    .tarefa-launch-panel {
      display: none;
      margin-top: 6px;
    }
    .tarefa-launch-panel.aberta {
      display: block;
    }
    .tarefa-lancamento-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(140px, 0.62fr) minmax(150px, 0.60fr) minmax(170px, 0.50fr) minmax(110px, 0.30fr);
      grid-template-areas: "dias repeticao func horario lancar";
      gap: 6px 8px;
      align-items: end;
      padding: 6px 6px;
    }
    .tarefa-lancamento-bloco-repeticao {
      grid-area: repeticao;
      min-width: 0;
      align-self: end;
    }
    .tarefa-repeticao-campos {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 3px;
    }
    .tarefa-repeticao-campo {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1 1 60px;
    }
    .tarefa-repeticao-campo > span {
      font-size: 9px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      font-weight: 600;
      white-space: nowrap;
    }
    .tarefa-repeticao-campo input[type="number"] {
      width: 100%;
      height: 30px;
      font-size: 12px;
      padding: 0 6px;
      box-sizing: border-box;
    }
    .tarefa-lancamento-bloco {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .tarefa-lancamento-bloco-dias {
      grid-area: dias;
      min-width: 0;
      padding-top: 3px;
    }
    .tarefa-lancamento-bloco-horario {
      grid-area: horario;
      justify-self: start;
      align-self: end;
      width: 100%;
      max-width: 198px;
      margin-left: -2px;
    }
    .tarefa-lancamento-bloco-lancar {
      grid-area: lancar;
      justify-self: start;
      align-self: end;
      width: 100%;
      max-width: 126px;
      margin-left: 0;
    }
    .tarefa-lancamento-bloco-funcionarios {
      grid-area: func;
      padding-left: 4px;
      align-self: end;
      padding-top: 0;
    }
    .tarefa-lancamento-topo {
      display: flex;
      align-items: center;
      gap: 6px 8px;
      flex-wrap: wrap;
    }
    .tarefa-funcionarios-label {
      font-size: 10px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1;
    }
    .tarefa-funcionarios-grid {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px 6px;
    }
    .tarefa-lancamento-grid .tarefa-funcionarios-grid {
      width: 100%;
    }
    .tarefa-dias-checks,
    #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionarios-grid {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 4px;
      min-width: 0;
      overflow: hidden;
      margin-top: 3px;
    }
    .tarefa-dia-option,
    #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option {
      min-height: 30px;
      justify-content: flex-start;
      align-items: center;
      gap: 3px;
      padding: 4px 6px !important;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .tarefa-dia-option span,
    #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option span {
      min-width: auto;
      text-align: left;
      font-size: 12px;
    }
    .tarefa-lancamento-horario {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      margin-left: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 6px 10px;
      min-width: 160px;
      width: 100%;
      min-height: 48px;
    }
    .tarefa-lancamento-horario span {
      font-size: 10px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.35px;
      font-weight: 600;
      white-space: nowrap;
    }
    .tarefa-lancamento-horario input[type="time"] {
      width: 164px;
      min-width: 164px;
      height: 32px;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
    }
    .btn-lancar-desktop-destaque {
      width: 100%;
      min-height: 36px;
      background: #0e3a8a;
      color: #e6efff;
      border: 1px solid #1e40af;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(14, 58, 138, 0.30);
    }
    .btn-lancar-desktop-destaque:hover {
      background: #1e3a8a;
    }
    .tarefa-lancamento-horario input[type="time"]:focus {
      border-color: var(--green);
    }
    .tarefa-dias-acoes {
      margin-left: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tarefa-dias-acoes .btn {
      padding: 4px 8px;
      min-height: 26px;
      font-size: 11px;
    }
    .tarefa-funcionario-option {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--text);
      font-size: 11px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 2px 6px;
      cursor: pointer;
      user-select: none;
    }
    .tarefa-funcionario-option input[type="checkbox"] {
      width: 14px;
      height: 14px;
      margin: 0;
      cursor: pointer;
    }
    .tarefa-funcionario-resumo {
      margin-top: 0;
      margin-bottom: 4px;
      line-height: 1.35;
    }
    .tarefa-funcionario-resumo strong {
      color: var(--text);
      font-weight: 700;
    }
    .tarefa-funcionario-acoes {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tarefa-funcionario-acoes .btn {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .btn-excluir-x {
      min-width: 30px;
      width: 30px;
      height: 30px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      border-radius: 8px;
    }

    .tarefa-funcionarios-modal .modal-header { padding-bottom: 14px; }
    .tarefa-funcionarios-modal-body {
      flex: 0 1 auto;
      overflow-y: hidden;
      padding-top: 14px;
    }
    .tarefa-funcionarios-modal-body #tarefaFuncionariosResumo {
      min-height: 0;
      margin: 0;
      line-height: 1.3;
    }
    .tarefa-modal-funcionarios-busca {
      width: 100%;
    }
    .tarefa-modal-funcionarios-lista {
      display: grid;
      gap: 8px;
      max-height: min(46vh, 340px);
      overflow-y: auto;
      padding-right: 2px;
    }
    .tarefa-modal-funcionarios-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
    }
    .tarefa-modal-funcionarios-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      cursor: pointer;
    }
    .tarefa-modal-funcionarios-item span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: 13px;
    }
    .item-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .tarefa-cadastrada-item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 7px 9px;
    }
    #listaFuncionarios .tarefa-cadastrada-item {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    #listaFuncionarios .item-info {
      flex: 1 1 auto;
      min-width: 0;
    }
    #listaFuncionarios .item-actions {
      align-self: flex-start;
      justify-content: flex-end;
      margin-top: 0;
      gap: 6px;
    }
    .tarefa-cadastrada-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .tarefa-cadastrada-header-main {
      min-width: 0;
      flex: 1 1 320px;
    }
    .tarefa-cadastrada-actions {
      display: flex;
      flex-direction: row;
      gap: 6px;
      align-self: flex-start;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .tarefa-cadastrada-actions .btn {
      padding: 5px 10px;
      min-height: 30px;
      font-size: 12px;
    }
    .tarefa-cadastrada-actions .tag-status-mini {
      justify-content: center;
      min-height: 24px;
    }
    .tarefa-cadastrada-info-topo {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tarefa-cadastrada-resumo {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 1px;
    }
    .tarefa-cadastrada-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      margin-top: 4px;
      font-size: 11px;
      color: var(--text-dim);
    }
    .tarefa-cadastrada-meta strong {
      color: var(--text-muted);
      font-weight: 600;
    }
    .tarefa-cadastrada-launch {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 12px;
      padding: 10px;
    }
    .tarefa-funcionarios-inline .msg {
      min-height: 0;
      margin-top: 0;
      line-height: 1.2;
    }
    .checklist-item .item-nome {
      font-size: 18px;
      font-weight: 800;
      line-height: 1.1;
      text-transform: uppercase;
    }
    .checklist-titulo-linha {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .checklist-item .item-detalhe { font-size: 11px; line-height: 1.25; }
    .checklist-item {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.55fr) minmax(260px, 1.15fr) auto;
      align-items: center;
      column-gap: 18px;
    }
    .checklist-dia-semana-destaque {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(245, 158, 11, 0.42);
      background: rgba(245, 158, 11, 0.1);
      color: #fbbf24;
      font-size: clamp(18px, 2vw, 34px);
      font-weight: 900;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }
    .checklist-responsavel-destaque {
      min-height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 14px;
      border-left: 4px solid #ef4444;
      background: rgba(239, 68, 68, 0.08);
    }
    .checklist-responsavel-label {
      font-size: 10px;
      font-weight: 800;
      color: #fca5a5;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1.2;
    }
    .checklist-responsavel-nome {
      color: #ff1f1f;
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 900;
      line-height: 0.95;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }
    .checklist-item.checklist-alerta-discreto {
      border-color: rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.06);
    }
    .checklist-card-aviso {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-top: 6px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(245, 158, 11, 0.10);
      color: var(--amber);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
    }
    .checklist-card-aviso.atrasado {
      background: rgba(239, 68, 68, 0.10);
      color: var(--red);
    }
    .checklist-meta { margin: 4px 0 0; padding-left: 18px; color: var(--text-muted); }
    .checklist-meta li { margin: 2px 0; }
    .checklist-info-pin {
      position: relative;
      flex: 0 0 auto;
      margin: 0;
    }
    .checklist-info-pin summary {
      list-style: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(245, 158, 11, 0.55);
      background: rgba(245, 158, 11, 0.12);
      color: var(--amber);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      user-select: none;
      font-family: Georgia, 'Times New Roman', serif;
      font-style: italic;
    }
    .checklist-info-pin summary::-webkit-details-marker { display: none; }
    .checklist-info-pin-texto {
      display: none;
      position: absolute;
      left: 0;
      top: calc(100% + 7px);
      z-index: 20;
      width: fit-content;
      min-width: 260px;
      max-width: min(440px, 70vw);
      margin-top: 0;
      padding: 8px 10px;
      border: 1px solid rgba(245, 158, 11, 0.30);
      border-radius: 8px;
      background: rgba(7, 16, 11, 0.96);
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .checklist-info-pin[open] .checklist-info-pin-texto {
      display: block;
    }
    .checklist-info-pin:hover .checklist-info-pin-texto,
    .checklist-info-pin:focus-within .checklist-info-pin-texto {
      display: block;
    }
    .regra-info-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
    }
    .regra-info-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(245,158,11,.75);
      background: rgba(245,158,11,.16);
      color: #fbbf24;
      font-weight: 900;
      font-size: 14px;
      line-height: 1;
      box-shadow: 0 0 0 1px rgba(245,158,11,.12);
    }
    .regra-info-btn:hover {
      background: rgba(245,158,11,.26);
      border-color: rgba(251,191,36,.95);
      color: #fde68a;
    }
    .checklists-futuros-box {
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(10, 15, 13, 0.7);
      overflow: hidden;
    }
    .checklists-futuros-box summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(24, 34, 24, 0.85);
    }
    .checklists-futuros-box summary::-webkit-details-marker { display: none; }
    .checklists-futuros-box summary::after {
      content: 'Abrir';
      font-size: 11px;
      font-weight: 700;
      text-transform: none;
      color: var(--green);
      border: 1px solid rgba(34,197,94,0.22);
      background: rgba(34,197,94,0.08);
      border-radius: 999px;
      padding: 4px 9px;
      flex-shrink: 0;
    }
    .checklists-futuros-box[open] summary::after { display: none; }
    .checklists-futuros-conteudo { padding: 10px; }
    .checklists-futuros-filtros {
      display: grid;
      grid-template-columns: minmax(170px, 0.9fr) minmax(110px, 0.55fr) minmax(110px, 0.55fr) minmax(220px, 1.2fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid rgba(107,143,112,0.18);
      border-radius: var(--radius-sm);
      background: rgba(17,26,20,0.78);
    }
    .checklists-futuros-filtros input {
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #07100b;
      color: var(--text);
      font-family: inherit;
      font-size: 13px;
    }
    .checklists-futuros-total {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(34,197,94,0.08);
      border: 1px solid rgba(34,197,94,0.2);
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .checklists-futuros-filtros {
        grid-template-columns: 1fr 1fr;
      }
      .checklists-futuros-filtros input[placeholder*="funcionário"],
      .checklists-futuros-total {
        grid-column: 1 / -1;
      }
    }
    /* Filtros compactos da Próxima tarefa: data/hora/funcionário menores + tarefa */
    .checklists-futuros-filtros-compacto {
      grid-template-columns: 130px 96px 96px minmax(120px, 0.8fr) minmax(150px, 1fr) auto;
    }
    .checklists-futuros-filtros-compacto .filtro-compacto-data { max-width: 130px; }
    .checklists-futuros-filtros-compacto .filtro-compacto-hora { max-width: 96px; }
    .checklists-futuros-filtros-compacto .filtro-compacto-func { max-width: 220px; }
    @media (max-width: 900px) {
      .checklists-futuros-filtros-compacto {
        grid-template-columns: 1fr 1fr;
      }
      .checklists-futuros-filtros-compacto .filtro-compacto-tarefa,
      .checklists-futuros-filtros-compacto .filtro-compacto-func {
        grid-column: 1 / -1;
        max-width: none;
      }
    }
    .checklists-futuros-acoes-massa {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin: 0 0 10px;
    }
    .checklist-item-check {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 2;
    }
    .checklist-item-check input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .checklist-item { position: relative; }
    .checklists-futuros-conteudo .checklist-item .item-info { padding-left: 22px; }
    #perfis .perfil-form-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }
    #perfis .perfil-form-row > * { min-width: 0; }
    #perfis .perfil-titulo-inline {
      margin: 0;
      align-self: center;
      white-space: nowrap;
      min-width: 90px;
    }
    #nomePerfil {
      max-width: 180px;
      flex: 0 0 180px !important;
    }
    #codigoPerfil {
      max-width: 160px;
      flex: 0 0 160px !important;
    }
    #filtroPermissoesPerfil {
      min-width: 170px;
      max-width: 250px;
      flex: 1 1 210px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
    }
    #perfis .perfil-form-row .btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    #btnMarcarDesmarcarPermissoesPerfil {
      max-width: 130px;
    }
    #filtroPermissoesPerfil::placeholder { color: var(--text-muted); }
    @media (max-width: 1280px) {
      #perfis .perfil-form-row {
        flex-wrap: wrap;
      }
      #filtroPermissoesPerfil {
        max-width: none;
        flex: 1 1 100%;
      }
    }
    .permissoes-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 330px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(5,12,9,0.35); padding: 6px; }
    .perm-item { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 12px; line-height: 1.25; color: var(--text); min-height: 28px; }
    .perm-item:hover { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.14); }
    .perm-item[hidden] { display: none !important; }
    .perm-item input { width: 16px; height: 16px; }
    #perfis .permissoes-grid { max-height: 62vh; padding: 8px; gap: 8px; }
    .perm-modulo { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.015); }
    .perm-modulo[hidden] { display: none !important; }
    .perm-modulo-titulo { width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface2); color: var(--accent); display: flex; align-items: center; justify-content: space-between; font: 800 11px/1.2 var(--font-sans); letter-spacing: .7px; text-transform: uppercase; cursor: pointer; }
    .perm-modulo-seta { transition: transform .15s ease; }
    .perm-modulo.recolhido .perm-modulo-seta { transform: rotate(-90deg); }
    .perm-modulo.recolhido .perm-matriz { display: none; }
    .perm-matriz { min-width: 620px; }
    .perm-matriz-cabecalho,
    .perm-matriz-linha { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(4, 92px); align-items: center; }
    .perm-matriz-cabecalho { min-height: 32px; color: var(--text-muted); background: rgba(255,255,255,.025); font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .perm-matriz-cabecalho span { text-align: center; padding: 6px; }
    .perm-matriz-cabecalho span:first-child { text-align: left; padding-left: 12px; }
    .perm-matriz-linha { min-height: 38px; border-top: 1px solid rgba(255,255,255,.055); }
    .perm-matriz-linha[hidden] { display: none !important; }
    .perm-recurso-nome { min-width: 0; padding: 7px 12px; color: var(--text); font-size: 12px; font-weight: 600; }
    .perm-celula { align-self: stretch; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.05); cursor: pointer; }
    .perm-celula:hover { background: rgba(34,197,94,.07); }
    .perm-celula input { width: 17px; height: 17px; cursor: pointer; }
    .perm-celula.indisponivel { color: var(--text-dim); cursor: default; opacity: .45; }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
    @media (max-width: 760px) {
      #perfis .permissoes-grid { overflow-x: auto; }
      .perm-matriz-cabecalho,
      .perm-matriz-linha { grid-template-columns: minmax(180px, 1fr) repeat(4, 74px); }
    }
    #perfis .card,
    #funcionarios .card {
      padding: 12px 14px;
    }
    #perfis .card-title,
    #funcionarios .card-title {
      font-size: 12px;
      letter-spacing: .55px;
    }
    #perfis .form-row,
    #funcionarios .form-row {
      gap: 8px;
    }
    #perfis input,
    #perfis select,
    #funcionarios input,
    #funcionarios select {
      min-height: 34px;
      padding: 7px 10px;
      font-size: 12px;
    }
    #perfis .btn,
    #funcionarios .btn {
      min-height: 32px;
      padding: 0 10px;
      font-size: 12px;
    }
    .funcionario-email-verificacao-box {
      display: none;
      margin-top: 10px;
      padding: 12px;
      border: 1px solid rgba(34,197,94,0.24);
      border-radius: var(--radius-sm);
      background: rgba(34,197,94,0.08);
      color: var(--text);
      line-height: 1.45;
    }
    .funcionario-email-verificacao-box.is-error {
      border-color: rgba(239,68,68,0.3);
      background: rgba(127,29,29,0.16);
    }
    .funcionario-email-verificacao-box .item-detalhe {
      margin-top: 3px;
    }
    .relatorio-horarios-execucao {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 6px;
    }
    .relatorio-horario-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      border: 1px solid transparent;
    }
    .relatorio-horario-chip.inicio {
      color: #bfdbfe;
      background: rgba(37,99,235,0.16);
      border-color: rgba(96,165,250,0.28);
    }
    .relatorio-horario-chip.fim {
      color: #bbf7d0;
      background: rgba(34,197,94,0.16);
      border-color: rgba(74,222,128,0.3);
    }
    .relatorio-horario-chip strong {
      color: inherit;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .relatorio-tarefa-card {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(260px, auto);
      align-items: center;
      gap: 14px;
    }
    .relatorio-tarefa-lateral {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .relatorio-tarefa-lateral .relatorio-horarios-execucao {
      justify-content: center;
      margin: 0;
    }
    .relatorio-tarefa-lateral .tag {
      margin-left: 0;
    }
    @media (max-width: 820px) {
      .relatorio-tarefa-card {
        grid-template-columns: 1fr;
      }
      .relatorio-tarefa-lateral {
        align-items: flex-start;
      }
      .relatorio-tarefa-lateral .relatorio-horarios-execucao {
        justify-content: flex-start;
      }
    }
    #listaPerfis .item,
    #listaFuncionarios .item {
      padding: 7px 10px;
      min-height: 0;
    }
    #listaPerfis .item-nome,
    #listaFuncionarios .item-nome {
      font-size: 12px;
      line-height: 1.25;
    }
    #listaPerfis .item-detalhe,
    #listaFuncionarios .item-detalhe {
      font-size: 10px;
      line-height: 1.25;
    }
    #listaPerfis .item-actions,
    #listaFuncionarios .item-actions {
      gap: 5px;
    }
    #listaPerfis .btn,
    #listaFuncionarios .btn {
      min-height: 28px;
      padding: 0 9px;
      font-size: 11px;
    }
    .funcionario-cadastro-grid {
      display: grid !important;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px 16px !important;
      align-items: end !important;
      padding: 16px 0 12px !important;
    }
    .funcionario-cadastro-grid > .campo-com-label {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
    }
    .funcionario-campo-nome { grid-column: span 6; }
    .funcionario-campo-email { grid-column: span 6; }
    .funcionario-campo-pin { grid-column: span 3; }
    .funcionario-campo-senha { grid-column: span 5; }
    .funcionario-campo-perfil { grid-column: span 4; }
    .funcionario-cadastro-grid input,
    .funcionario-cadastro-grid select {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 40px !important;
      box-sizing: border-box !important;
      font-size: 12px !important;
    }
    .funcionario-cadastro-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0 14px;
      border-top: 1px solid var(--border);
    }
    .funcionario-admin-global-box {
      min-width: 0;
      padding: 9px 12px;
      border: 1px solid rgba(245,158,11,.38);
      border-radius: 9px;
      background: rgba(245,158,11,.07);
    }
    .funcionario-admin-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      margin: 0;
    }
    .funcionario-admin-toggle input[type="checkbox"] {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px;
      accent-color: var(--accent);
    }
    .funcionario-admin-toggle span { display: grid; gap: 2px; }
    .funcionario-admin-toggle strong { color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .35px; }
    .funcionario-admin-toggle small { color: var(--text-muted); font-size: 10px; line-height: 1.25; }
    .funcionario-cadastro-actions { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }
    .funcionario-cadastro-actions .btn { min-width: 100px; height: 36px; }
    #containerVinculosFuncionario { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
    .funcionario-vinculos-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .funcionario-vinculos-header .campo-label { margin: 0 0 3px; font-size: 11px; }
    .login-field-help { margin-top: 6px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
    @media (max-width: 900px) {
      .funcionario-cadastro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .funcionario-cadastro-grid > .campo-com-label { grid-column: span 1; }
      .funcionario-campo-perfil { grid-column: 1 / -1 !important; }
    }
    @media (max-width: 600px) {
      .funcionario-cadastro-grid { grid-template-columns: 1fr; gap: 11px !important; padding-top: 12px !important; }
      .funcionario-cadastro-grid > .campo-com-label { grid-column: 1 !important; }
      .funcionario-cadastro-footer { align-items: stretch; flex-direction: column; }
      .funcionario-admin-global-box { width: 100%; box-sizing: border-box; }
      .funcionario-cadastro-actions { width: 100%; margin-left: 0; }
      .funcionario-cadastro-actions .btn { flex: 1 1 0; }
      .funcionario-vinculos-header { align-items: stretch; flex-direction: column; }
      .funcionario-vinculos-header #btnAbrirSeletorLojas { width: 100%; height: 34px !important; }
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 600;
    }
    .tag-green { background: var(--green-glow); color: var(--green); }
    .tag-red { background: rgba(239,68,68,0.1); color: var(--red); }
    .tag-amber { background: rgba(245,158,11,0.1); color: var(--amber); }
    .tag-blue { background: rgba(59,130,246,0.12); color: #60a5fa; }
    .tag-gray { background: var(--surface2); color: var(--text-muted); }

    .baixar-contas-atalhos {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .baixar-contas-atalho {
      min-height: 70px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.025);
      color: var(--text);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .baixar-contas-atalho:hover,
    .baixar-contas-atalho.ativo {
      transform: translateY(-1px);
    }
    .baixar-contas-atalho strong {
      font-size: 13px;
      line-height: 1.15;
      color: #fff;
    }
    .baixar-contas-atalho span {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.25;
    }
    .baixar-contas-atalho[data-tipo="hoje"] {
      border-color: rgba(245,158,11,0.35);
      background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.035));
    }
    .baixar-contas-atalho[data-tipo="hoje"].ativo,
    .baixar-contas-atalho[data-tipo="hoje"]:hover {
      border-color: rgba(245,158,11,0.7);
      box-shadow: 0 14px 32px rgba(245,158,11,0.12);
    }
    .baixar-contas-atalho[data-tipo="vencido2"] {
      border-color: rgba(239,68,68,0.38);
      background: linear-gradient(135deg, rgba(239,68,68,0.17), rgba(239,68,68,0.035));
    }
    .baixar-contas-atalho[data-tipo="vencido2"].ativo,
    .baixar-contas-atalho[data-tipo="vencido2"]:hover {
      border-color: rgba(239,68,68,0.78);
      box-shadow: 0 14px 32px rgba(239,68,68,0.13);
    }
    .baixar-contas-atalho[data-tipo="amanha"] {
      border-color: rgba(59,130,246,0.42);
      background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.035));
    }
    .baixar-contas-atalho[data-tipo="amanha"].ativo,
    .baixar-contas-atalho[data-tipo="amanha"]:hover {
      border-color: rgba(59,130,246,0.78);
      box-shadow: 0 14px 32px rgba(59,130,246,0.13);
    }
    .baixar-contas-resumo {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .baixar-contas-resumo-card {
      border: 1px solid rgba(34,197,94,0.16);
      border-radius: 8px;
      background: rgba(5,16,10,0.52);
      padding: 10px 12px;
      min-height: 64px;
    }
    .baixar-contas-resumo-card .label {
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .baixar-contas-resumo-card .valor {
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      margin-top: 5px;
    }

    /* ---- STATUS / FEEDBACK ---- */
    .msg { font-size: 13px; color: var(--text-muted); margin-top: 10px; min-height: 20px; }
    .msg.ok { color: var(--green); }
    .msg.err { color: var(--red); }
    /* Mensagem de alerta (amarela) destacada dentro de modais como o de PIN/conferência. */
    .msg.alerta {
      color: #b45309;
      background: rgba(245, 158, 11, 0.14);
      border: 1px solid rgba(245, 158, 11, 0.55);
      border-radius: 8px;
      padding: 8px 10px;
      font-weight: 600;
      line-height: 1.35;
    }
    /* Caixa de PIN em modo alerta: borda/fundo amarelados para o usuário leigo perceber. */
    #pinActionOverlay .modal.pin-modal-alerta {
      border: 2px solid rgba(245, 158, 11, 0.75);
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), var(--shadow-lg, 0 10px 40px rgba(0,0,0,.4));
      background: linear-gradient(180deg, rgba(245,158,11,0.06), transparent 120px), var(--surface);
    }
    .msg.ponto-alerta-dez-minutos {
      color: #fff;
      background: linear-gradient(135deg, rgba(239,68,68,0.3), rgba(127,29,29,0.92));
      border: 2px solid #ef4444;
      border-radius: 8px;
      padding: 12px 14px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
      box-shadow: 0 0 0 4px rgba(239,68,68,0.12), 0 16px 34px rgba(239,68,68,0.22);
      animation: pontoAlertaDezMinutosPulse 0.85s ease-in-out infinite;
    }
    @keyframes pontoAlertaDezMinutosPulse {
      0%, 100% { transform: translateY(0); filter: brightness(1); }
      50% { transform: translateY(-1px); filter: brightness(1.18); }
    }

    .empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-dim);
      font-size: 14px;
    }

    /* ---- MODAL (Execução) ---- */
    .overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
      z-index: 9600;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: auto;
    }
    .overlay.show { display: flex; }
    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 560px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      max-width: min(560px, calc(100vw - 24px));
      max-height: min(85vh, calc(100dvh - 24px));
    }
    .modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .modal-header h3 { font-size: 16px; font-weight: 600; }
    .modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-shrink: 0;
    }
    .ajuste-saldo-modal {
      max-height: none;
    }
    .ajuste-saldo-modal .modal-body {
      flex: 0 0 auto;
      overflow: visible;
      gap: 10px !important;
      padding: 16px 24px;
    }
    .ajuste-saldo-field {
      width: 100%;
      min-height: 38px;
      min-width: 160px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s, background 0.15s;
    }
    .ajuste-saldo-field:focus {
      border-color: var(--green);
      background: rgba(6, 16, 12, 0.95);
    }
    .ajuste-saldo-field::placeholder {
      color: var(--text-dim);
    }
    select.ajuste-saldo-field option {
      background: #111;
      color: var(--text);
    }
    textarea.ajuste-saldo-field {
      min-height: 72px;
      resize: vertical;
    }
    .ajuste-saldo-tipos {
      display: flex;
      gap: 8px;
      margin: 0;
    }
    .confirmacao-destaque-box {
      border: 1px solid rgba(34, 197, 94, 0.22);
      border-radius: var(--radius);
      background: rgba(34, 197, 94, 0.07);
      padding: 12px;
      display: grid;
      width: 164px;
      min-width: 164px;
      font-size: 13px;
    }
    .confirmacao-destaque-box strong {
      color: var(--text);
      font-size: 15px;
    }
    .confirmacao-destaque-box span {
      color: var(--text-muted);
    }
    .forma-pagamento-modal-intro {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .forma-pagamento-modal-select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s;
    }
    .forma-pagamento-modal-select:focus {
      border-color: var(--green);
    }
    .forma-pagamento-opcoes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
    .forma-pagamento-opcao {
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      padding: 12px;
      min-height: 74px;
      color: #f8fafc;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    }
    .forma-pagamento-opcao:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      border-color: rgba(255, 255, 255, 0.35);
    }
    .forma-pagamento-opcao .nome {
      font-size: 15px;
      font-weight: 900;
      line-height: 1.2;
    }
    .forma-pagamento-opcao .hint {
      font-size: 11px;
      opacity: 0.78;
    }
    .forma-pagamento-cor-0 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.92), rgba(21, 128, 61, 0.72)); }
    .forma-pagamento-cor-1 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.92), rgba(29, 78, 216, 0.72)); }
    .forma-pagamento-cor-2 { background: linear-gradient(135deg, rgba(249, 115, 22, 0.94), rgba(194, 65, 12, 0.74)); }
    .forma-pagamento-cor-3 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.92), rgba(126, 34, 206, 0.72)); }
    .forma-pagamento-cor-4 { background: linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(15, 118, 110, 0.72)); }
    .forma-pagamento-cor-5 { background: linear-gradient(135deg, rgba(244, 63, 94, 0.92), rgba(190, 18, 60, 0.72)); }
    .conta-financeira-opcoes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
    .conta-financeira-opcao {
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: var(--radius);
      padding: 12px;
      min-height: 92px;
      color: #f8fafc;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
      transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    }
    .conta-financeira-opcao:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      border-color: rgba(255, 255, 255, 0.35);
    }
    .conta-financeira-opcao .nome {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.2;
    }
    .conta-financeira-opcao .saldo {
      font-size: 18px;
      font-weight: 900;
      font-family: 'DM Mono', monospace;
    }
    .conta-financeira-opcao .hint {
      font-size: 11px;
      opacity: 0.78;
    }
    .conta-financeira-movimentacao-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .conta-financeira-valor-pago {
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid rgba(34, 197, 94, 0.28);
      border-radius: var(--radius-sm);
      background: rgba(34, 197, 94, 0.08);
    }
    .conta-financeira-valor-pago > span { color: var(--text); font-size: 13px; font-weight: 800; }
    .conta-financeira-valor-pago input {
      width: 100%;
      min-height: 44px;
      padding: 9px 12px;
      border: 1px solid var(--border-mid);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--green);
      font-family: 'DM Mono', monospace;
      font-size: 18px;
      font-weight: 900;
      outline: none;
    }
    .conta-financeira-valor-pago input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.14); }
    .conta-financeira-valor-pago small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
    .conta-financeira-movimentacao-toggle .rotulo {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .conta-financeira-movimentacao-toggle .btn-sm {
      min-width: 86px;
    }
    .conta-financeira-movimentacao-toggle .btn-sm.ativo {
      border-color: rgba(34, 197, 94, 0.45);
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset;
      background: rgba(34, 197, 94, 0.18);
      color: #dcfce7;
    }
    .conta-financeira-cor-0 { background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(29, 78, 216, 0.72)); }
    .conta-financeira-cor-1 { background: linear-gradient(135deg, rgba(22, 163, 74, 0.92), rgba(21, 128, 61, 0.72)); }
    .conta-financeira-cor-2 { background: linear-gradient(135deg, rgba(234, 88, 12, 0.94), rgba(194, 65, 12, 0.74)); }
    .conta-financeira-cor-3 { background: linear-gradient(135deg, rgba(14, 116, 144, 0.94), rgba(21, 94, 117, 0.74)); }
    .conta-financeira-cor-4 { background: linear-gradient(135deg, rgba(190, 24, 93, 0.92), rgba(157, 23, 77, 0.72)); }
    .conta-financeira-cor-5 { background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(109, 40, 217, 0.72)); }
    .conta-financeira-opcao-neutra {
      background: linear-gradient(135deg, rgba(71, 85, 105, 0.92), rgba(51, 65, 85, 0.74));
      border-color: rgba(148, 163, 184, 0.35);
      color: #e2e8f0;
    }
    .editar-titulo-modal {
      max-width: 860px;
    }
    .editar-titulo-resumo {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .editar-titulo-kpi {
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: var(--radius-sm);
      background: rgba(15, 23, 42, 0.46);
      padding: 10px 12px;
      min-width: 0;
    }
    .editar-titulo-kpi span {
      display: block;
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    .editar-titulo-kpi strong {
      color: var(--text);
      font-size: 14px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .editar-titulo-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .editar-titulo-form label {
      display: grid;
      gap: 5px;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      min-width: 0;
    }
    .editar-titulo-form label.linha-cheia {
      grid-column: 1 / -1;
    }
    .editar-titulo-form input,
    .editar-titulo-form select,
    .editar-titulo-form textarea {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text);
      padding: 9px 11px;
      font-family: inherit;
      font-size: 13px;
      outline: none;
      box-sizing: border-box;
    }
    .editar-titulo-form textarea {
      min-height: 74px;
      resize: vertical;
    }
    .editar-titulo-form input:focus,
    .editar-titulo-form select:focus,
    .editar-titulo-form textarea:focus {
      border-color: var(--green);
    }
    .editar-titulo-form select option {
      background: #111;
      color: var(--text);
    }
    .editar-titulo-toggle {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(34, 197, 94, 0.18);
      border-radius: var(--radius-sm);
      background: rgba(34, 197, 94, 0.06);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
    }
    .editar-titulo-toggle input {
      width: 16px;
      min-height: 16px;
      height: 16px;
      padding: 0;
      accent-color: var(--green);
    }
    .editar-titulo-alerta {
      border: 1px solid rgba(245, 158, 11, 0.28);
      border-radius: var(--radius-sm);
      background: rgba(245, 158, 11, 0.09);
      color: #fde68a;
      font-size: 12px;
      line-height: 1.45;
      padding: 10px 12px;
    }
    @media (max-width: 760px) {
      .editar-titulo-resumo,
      .editar-titulo-form {
        grid-template-columns: 1fr;
      }
      .editar-titulo-modal .modal-footer {
        flex-direction: column-reverse;
      }
      .editar-titulo-modal .modal-footer .btn {
        width: 100%;
      }
    }

    /* ---- CHECKLIST ITEM (execução) ---- */
    .exec-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }
    .exec-item:last-child { border-bottom: none; }
    .exec-item label { cursor: pointer; flex: 1; }
    .exec-item .nome-item { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
    .exec-item .obs-input {
      width: 100%;
      margin-top: 8px;
      padding: 8px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      min-height: 50px;
      display: none;
    }
    .exec-item.checked .obs-input { display: block; }

    .checkbox-custom {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border: 2px solid var(--text-dim);
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      margin-top: 1px;
    }
    .checkbox-custom.checked { background: var(--green); border-color: var(--green); }
    .checkbox-custom.checked::after { content: 'OK'; color: #000; font-size: 10px; font-weight: 700; }

    /* ---- CHECKBOXES PARA SELEÇÃO MÚLTIPLA ---- */
    .checkbox-recebivel-financeiro,
    .checkbox-rec-futuro-financeiro {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      appearance: auto !important;
      -webkit-appearance: checkbox !important;
      opacity: 1 !important;
      visibility: visible !important;
      accent-color: #22c55e !important;
      cursor: pointer !important;
      margin: 0 !important;
    }
    .financeiro-selecao-rec-futuros-row {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(15, 23, 42, 0.32);
      flex-wrap: wrap;
    }
    .rec-futuro-destaque {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 260px;
      padding: 8px 16px;
    }
    .rec-futuro-destaque-grupo {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
    }
    .rec-futuro-destaque-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .rec-futuro-destaque-data {
      font-size: 30px;
      font-weight: 900;
      color: #ff5b5b;
      text-shadow: 0 0 12px rgba(255,91,91,.45);
    }
    .rec-futuro-destaque-valor {
      font-size: 34px;
      font-weight: 900;
      color: #ffd400;
      text-shadow: 0 0 12px rgba(255,212,0,.45);
    }
    @media (max-width: 820px) {
      .rec-futuro-destaque { min-width: 100%; padding: 10px 0; }
      .rec-futuro-destaque-data { font-size: 25px; }
      .rec-futuro-destaque-valor { font-size: 28px; }
    }

    /* ---- DASHBOARD EXTRAS ---- */
    .dashboard-prod-grid {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 18px;
      align-items: center;
    }

    /* ── Nav reorder ── */
    #navContainer { display: flex; flex-direction: column; }
    .nav-group.drag-over { border-top: 2px solid var(--accent); }
    .nav-group.dragging { opacity: .4; }
    .nav-label { display: flex; align-items: center; gap: 4px; }

    .dashboard-period-tabs {
      display: inline-flex;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .dashboard-period-btn {
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .dashboard-period-btn:hover {
      border-color: var(--green);
      color: var(--text);
    }
    .dashboard-period-btn.active {
      border-color: rgba(34,197,94,0.35);
      background: var(--green-glow);
      color: var(--green);
    }
    /* Blindagem visual da seção de horas no Bater ponto */
    #bater_ponto .ponto-horas-card {
      overflow: hidden;
    }
    #bater_ponto .ponto-horas-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    #bater_ponto .ponto-horas-tabs .dashboard-period-btn {
      min-height: 34px;
      min-width: 72px;
      padding: 7px 12px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1;
      text-align: center;
    }
    #bater_ponto .ponto-horas-grid {
      display: grid;
      grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    #horasPieDashboard.ponto-horas-pie {
      width: clamp(156px, 18vw, 190px);
      height: clamp(156px, 18vw, 190px);
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      justify-self: center;
    }
    #bater_ponto .ponto-horas-card .prod-stats {
      margin-bottom: 10px;
    }
    #bater_ponto .ponto-horas-card .prod-func-list {
      margin-top: 10px;
    }
    .prod-pie {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--green) 0deg, rgba(107,143,112,0.25) 0deg 360deg);
      border: 1px solid var(--border);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
      margin: 0 auto;
    }
    .prod-pie-center {
      width: 128px;
      height: 128px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
    }
    .prod-pie-value {
      font-size: 28px;
      font-weight: 700;
      color: var(--green);
      font-family: 'DM Mono', monospace;
      line-height: 1;
    }
    .prod-pie-label {
      font-size: 11px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .prod-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 10px;
    }
    .prod-stat {
      padding: 7px 9px;
      border-radius: var(--radius-sm);
      background: var(--bg);
      border: 1px solid var(--border);
    }
    .prod-stat-label {
      font-size: 11px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .prod-stat-value {
      margin-top: 4px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      font-family: 'DM Mono', monospace;
    }
    .prod-period-info {
      margin-top: 10px;
      color: var(--text-muted);
      font-size: 12px;
    }
    .prod-func-list {
      margin-top: 12px;
      border-top: 1px solid var(--border);
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .prod-func-title {
      font-size: 11px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .prod-func-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--text);
    }
    .prod-func-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      max-width: 75%;
    }
    .prod-func-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .prod-func-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .prod-func-pct {
      font-family: 'DM Mono', monospace;
      color: var(--green);
      font-weight: 700;
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 900px) {
      html, body {
        -webkit-tap-highlight-color: transparent;
      }
      body {
        touch-action: manipulation;
      }
      .mobile-menu-btn { display: inline-flex; }
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 90vw);
        z-index: 90;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding: 20px 14px 24px;
        border-right: 1px solid var(--border);
      }
      .sidebar.open { transform: translateX(0); }
      body.mobile-nav-open { overflow: hidden; }
      body.mobile-nav-open .mobile-nav-overlay {
        opacity: 1;
        pointer-events: auto;
      }
      .logo {
        padding: 0 8px 18px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 12px;
        border-right: none;
        margin-right: 0;
      }
      .nav-group { padding: 0; }
      .nav-label {
        padding: 2px 8px 6px;
      }
      .topbar {
        padding: 14px 16px;
        align-items: flex-start;
      }
      .topbar-actions { gap: 8px; }
      .content {
        padding: max(14px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
      }
      .stats-grid { grid-template-columns: repeat(2,1fr); }
      .form-row { flex-direction: column; }
      .form-row input,
      .form-row select,
      .form-row textarea,
      .campo-curto {
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100% !important;
        min-height: 46px;
        font-size: 16px;
      }
      .btn { min-height: 46px; }
      .btn-sm { min-height: 40px; }
      .tarefa-form-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .tarefa-form-row > * {
        width: 100%;
      }
      #tarefas .tarefa-form-row input,
      #tarefas .tarefa-form-row select {
        min-height: 42px;
        height: 42px;
        font-size: 15px;
      }
      #tarefas #nomeTarefa,
      #tarefas #descTarefa,
      #tarefas .campo-com-label {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
      }
      #tarefas .campo-com-label {
        padding-top: 0;
      }
      #tarefas .campo-com-label .campo-label {
        position: static;
        display: block;
        margin-bottom: 6px;
        left: auto;
        top: auto;
      }
      #tarefas .tarefa-form-acoes {
        width: 100%;
        justify-content: flex-start;
      }
      #tarefas #btnSalvarTarefa,
      #tarefas #btnCancelarEdicaoTarefa {
        min-width: 0;
        width: 100%;
        height: 42px;
        font-size: 15px;
      }
      .tarefa-form-acoes {
        justify-content: flex-start;
      }
      #tarefas .tarefa-cadastro-atalhos {
        margin-top: 2px;
      }
      #tarefas .tarefa-cadastro-atalhos .btn {
        width: 100%;
      }
      #tarefas .tarefas-filtros-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      #tarefas .tarefas-filtros-row input {
        grid-column: 1 / -1;
        max-width: none;
      }
      #tarefas .tarefas-filtros-row .btn {
        width: 100%;
      }
      #tarefas .tarefas-filtros-row #btnSelecionarConsultaTarefas {
        grid-column: 1 / -1;
      }
      #tarefas .tarefas-consulta-item-acoes {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      #tarefas .tarefas-consulta-item-acoes .btn {
        width: 100%;
        min-height: 38px;
      }
      #tarefas .tarefas-consulta-item-acoes .btn.btn-red {
        grid-column: 1 / -1;
      }
      .dias-semana-linha {
        flex-direction: column;
        align-items: flex-start;
      }
      .dias-semana-checks {
        width: 100%;
        gap: 10px 14px;
      }
      #tarefas .tarefa-lancamento-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-areas:
          "dias dias"
          "repeticao func"
          "repeticao horario";
        gap: 6px;
        align-items: start;
      }
      #tarefas .tarefa-lancamento-bloco {
        gap: 4px;
      }
      #tarefas .tarefa-lancamento-bloco-funcionarios {
        padding-left: 4px;
        align-self: start;
      }
      #tarefas .tarefa-lancamento-bloco-horario {
        justify-self: stretch;
        align-self: start;
        width: 100%;
        max-width: none;
      }
      #tarefas .tarefa-funcionarios-label {
        font-size: 9px;
        letter-spacing: 0.3px;
      }
      .tarefa-dias-checks,
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionarios-grid,
      #tarefas .tarefa-lancamento-bloco-funcionarios .tarefa-funcionarios-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        align-items: start;
      }
      .tarefa-dia-option,
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option {
        min-height: 30px;
        font-size: 11px;
        padding: 3px 6px !important;
        white-space: normal;
      }
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionario-option input[type="checkbox"] {
        width: 14px;
        height: 14px;
      }
      #tarefas .tarefa-funcionario-resumo {
        font-size: 11px;
        margin-bottom: 3px;
      }
      #tarefas .tarefa-funcionario-acoes .btn {
        width: 100%;
        min-height: 34px;
        font-size: 11px;
        padding: 5px 8px;
      }
      #tarefas .tarefa-lancamento-horario {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        min-height: 40px;
        padding: 6px 8px;
        align-items: flex-start;
      }
      #tarefas .tarefa-lancamento-horario input[type="time"] {
        box-sizing: border-box;
        width: 96%;
        min-width: 0;
        min-height: 28px;
        padding: 4px 6px;
        font-size: 11px;
      }
      #tarefas .tarefa-funcionario-option {
        min-width: 0;
        font-size: 12px;
        padding: 4px 8px;
      }
      #tarefas .tarefa-funcionario-option span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #tarefas .tarefa-lancar-mobile-wrap {
        margin-top: 6px;
        padding-top: 6px;
      }
      #tarefas .tarefa-lancar-mobile-wrap .btn-lancar-mobile-destaque {
        min-height: 40px;
        font-size: 14px;
      }
      #tarefas .tarefas-consulta-item-descricao {
        font-size: 10px;
      }
      #tarefas .tarefas-consulta-item-config {
        border: 0;
        background: transparent;
        padding: 6px 0 0;
      }
      #tarefas .tarefa-cadastrada-launch {
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: 6px 0;
      }
      .funcionario-form-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .funcionario-form-row > * {
        width: 100%;
      }
      .funcionario-form-row #btnSalvarFuncionario,
      .funcionario-form-row #btnCancelarEdicaoFuncionario {
        width: 100%;
      }
      .funcionario-cadastro-header #btnToggleCadastroFuncionario {
        width: 100%;
      }
      .dias-semana-checks label {
        min-height: 38px;
        padding: 4px 2px;
      }
      .dias-semana-checks input[type="checkbox"] {
        width: 20px;
        height: 20px;
      }
      .item {
        align-items: flex-start;
        flex-direction: column;
      }
      .checklist-item {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .checklist-responsavel-destaque {
        min-height: 0;
      }
      .item-actions {
        width: 100%;
        flex-wrap: wrap;
      }
      .item-actions .btn,
      .item-actions .tag {
        width: 100%;
        justify-content: center;
      }
      .dashboard-prod-grid { grid-template-columns: 1fr; }
      .prod-pie { width: 170px; height: 170px; }
      .prod-pie-center { width: 110px; height: 110px; }
      #bater_ponto .ponto-horas-grid {
        grid-template-columns: 1fr;
      }
      #horasPieDashboard.ponto-horas-pie {
        width: 166px;
        height: 166px;
      }
    }

    @media (max-width: 600px) {
      .stats-grid { grid-template-columns: 1fr; }
      #listaFuncionarios .tarefa-cadastrada-item {
        flex-direction: column;
      }
      #listaFuncionarios .item-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .rf-pie-dashboard {
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .rf-pie-legenda {
        width: 100%;
      }
      .rf-dashboard-pizzas-grid {
        grid-template-columns: 1fr;
      }
      .content {
        padding: max(12px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom));
      }
      .prod-stats { grid-template-columns: 1fr; }
      .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .topbar-main {
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .topbar-clock {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .topbar-business-day {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
      }
      .topbar-actions {
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 8px;
      }
      .topbar-store {
        order: 0;
        width: auto;
        max-width: 100%;
        min-width: 0;
      }
      .topbar-actions .btn-sm {
        font-size: 12px;
        padding: 8px 10px;
      }
      .topbar-user {
        order: 0;
        width: auto;
        align-items: flex-start;
        min-height: 28px;
        padding: 4px 8px;
      }
      .topbar-user-name {
        text-align: left;
        font-size: 14px;
      }
      .badge-status,
      .sync-status {
        display: none;
      }
      .notification-panel {
        position: fixed;
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 16px;
        right: 16px;
        width: auto;
        max-height: min(60vh, 420px);
      }
      .nav-btn {
        padding: 12px;
      }
      .nav-title {
        font-size: 15px;
      }
      .page-title {
        font-size: 20px;
      }
      .card {
        padding: 16px;
      }
      .modal {
        max-height: 92vh;
      }
      .modal-header,
      .modal-body,
      .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
      }
      .modal-footer {
        flex-direction: column;
      }
      .modal-footer .btn {
        width: 100%;
      }
      .overdue-alert-banner {
        align-items: flex-end;
        padding: 16px;
      }
      .overdue-alert-card {
        width: 100%;
        padding: 18px;
      }
      .overdue-alert-title {
        font-size: 22px;
      }
    }

    @media (max-width: 420px) {
      .content {
        padding: max(10px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom));
      }
      .topbar {
        padding: 10px 10px;
        gap: 6px;
      }
      .topbar h1 {
        font-size: 16px;
      }
      .topbar .sub {
        font-size: 12px;
      }
      .topbar-actions {
        gap: 6px;
      }
      .topbar-actions .btn-sm,
      .topbar-actions .notification-btn {
        min-height: 38px;
        height: 38px;
        padding: 7px 9px;
        font-size: 11px;
      }
      #tarefas .tarefas-filtros-row {
        grid-template-columns: 1fr;
      }
      .card {
        padding: 12px;
        margin-bottom: 12px;
      }
      .card-title {
        font-size: 13px;
        margin-bottom: 10px;
      }
      .page-title {
        font-size: 15px;
      }
      .page-sub {
        font-size: 13px;
        margin-bottom: 16px;
      }
      .form-row input,
      .form-row select,
      .form-row textarea,
      .tarefa-form-row input,
      .tarefa-form-row select {
        min-height: 44px;
        font-size: 16px;
        padding: 7px 9px;
      }
      #tarefas .tarefa-form-row input,
      #tarefas .tarefa-form-row select,
      #tarefas #btnSalvarTarefa,
      #tarefas #btnCancelarEdicaoTarefa {
        min-height: 40px;
        height: 40px;
        font-size: 14px;
      }
      .btn {
        min-height: 44px;
        padding: 9px 12px;
        font-size: 13px;
      }
      .btn-sm {
        min-height: 38px;
        padding: 7px 10px;
        font-size: 12px;
      }
      .item {
        padding: 7px 9px;
      }
      .item-nome {
        font-size: 13px;
      }
      .item-detalhe {
        font-size: 12px;
      }
      .dias-semana-checks {
        gap: 8px 10px;
      }
      .dias-semana-checks label {
        font-size: 12px;
        min-height: 34px;
      }
      .dias-semana-checks input[type="checkbox"] {
        width: 18px;
        height: 18px;
      }
      .dias-semana-acoes {
        width: 100%;
        gap: 8px;
      }
      .dias-semana-acoes .btn {
        flex: 1 1 auto;
        width: auto;
      }
      .tarefa-lancamento-row {
        align-items: center;
        gap: 6px;
      }
      .tarefa-lancamento-row .tarefa-funcionarios-label {
        min-width: 0;
      }
      .tarefa-lancamento-row .tarefa-dias-acoes {
        justify-content: flex-start;
      }
      .tarefa-lancamento-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "dias horario"
          "repeticao repeticao"
          "func func";
      }
      .tarefa-lancamento-horario {
        align-items: flex-start;
        min-width: 0;
      }
      .tarefa-dias-checks,
      #tarefas .tarefa-lancamento-bloco-dias .tarefa-funcionarios-grid,
      #tarefas .tarefa-lancamento-bloco-funcionarios .tarefa-funcionarios-grid {
        grid-template-columns: 1fr;
      }
      .tarefa-cadastrada-item {
        gap: 8px;
      }
      .tarefa-cadastrada-header {
        flex-direction: column;
      }
      .tarefa-cadastrada-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: auto;
      }
      .prod-pie {
        width: 150px;
        height: 150px;
      }
      .prod-pie-center {
        width: 96px;
        height: 96px;
      }
      .prod-pie-value {
        font-size: 24px;
      }
      .notification-panel {
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
      }
      .overdue-alert-card {
        padding: 14px;
        border-radius: 16px;
      }
      .overdue-alert-title {
        font-size: 20px;
      }
      .overdue-alert-task {
        font-size: 24px;
      }
      .overdue-alert-funcionario {
        font-size: 22px;
      }
      .overdue-alert-horario {
        font-size: 16px;
      }
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

    .progress-bar-wrap {
      background: var(--border);
      border-radius: 99px;
      height: 6px;
      overflow: hidden;
      margin-top: 6px;
    }
    .progress-bar-fill {
      height: 100%;
      background: var(--green);
      border-radius: 99px;
      transition: width 0.4s;
    }