/* Padrao visual compartilhado ZapVexa: telas administrativas e modais. */
.app-shell{--ui-radius:12px;--ui-control-radius:9px;--ui-focus:color-mix(in srgb,var(--brand) 24%,transparent)}
.main-area .page{font-size:13px;line-height:1.5}
.main-area .page-head{gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.main-area .page-head h2{font-size:24px;line-height:1.25;font-weight:750;letter-spacing:-.025em;margin:0 0 6px}
.main-area .page-head p{font-size:13px;line-height:1.6;max-width:72ch}
.main-area .page-head .head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.main-area .page .panel{border-radius:var(--ui-radius);border-color:var(--line);box-shadow:0 2px 8px #07162206}
.main-area .page .panel h3{line-height:1.4;letter-spacing:-.015em}
.app-shell :is(.page,.modal) .btn{min-height:40px;padding:9px 15px;gap:8px;border-radius:var(--ui-control-radius);font-size:13px;font-weight:650;line-height:1.4;cursor:pointer;transition:background .15s,box-shadow .15s,opacity .15s}
.app-shell :is(.page,.modal) .btn>svg{flex-shrink:0;width:17px;height:17px}
.app-shell :is(.page,.modal) .btn.primary{color:#05250e;background:var(--brand);border:1px solid transparent;box-shadow:0 2px 4px #051b0a0a}
.app-shell :is(.page,.modal) .btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--brand) 88%,#fff)}
.app-shell :is(.page,.modal) .btn.secondary{color:var(--text);background:color-mix(in srgb,var(--brand) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line))}
.app-shell :is(.page,.modal) .btn.ghost{color:var(--text);background:transparent;border:1px solid var(--line)}
.app-shell :is(.page,.modal) .btn.ghost:hover:not(:disabled){background:var(--surface)}
.app-shell :is(.page,.modal) .btn.danger{color:#a61d35;background:#fff0f2;border:1px solid #f2c9cf}
.dark .app-shell :is(.page,.modal) .btn.danger{color:#ff9ba9;background:#ef52621a;border-color:#ef526242}
.app-shell :is(.page,.modal) .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.app-shell :is(.page,.modal) :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.app-shell :is(.page,.modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea){box-sizing:border-box;border:1px solid var(--line);border-radius:var(--ui-control-radius);background:var(--surface);color:var(--text);font:inherit;font-size:13px;line-height:1.5;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
.app-shell :is(.page,.modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select){min-height:40px}
.app-shell :is(.page,.modal) textarea{resize:vertical;min-height:88px}
.app-shell :is(.page,.modal) :is(input,textarea)::placeholder{color:var(--muted);opacity:.8}
.app-shell :is(.page,.modal) :is(input,select,textarea):focus-visible{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--ui-focus)}
.app-shell :is(.page,.modal) :is(input,select,textarea)[aria-invalid=true]{border-color:#e5484d}
.main-area .page .table-panel{overflow-x:auto;scrollbar-width:thin}
.main-area .page table{width:100%;border-collapse:collapse}
.main-area .page th{text-align:left;font-size:10px;line-height:1.5;font-weight:750;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);background:var(--surface);white-space:nowrap}
.main-area .page :is(th,td){padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.main-area .page td{font-size:13px;line-height:1.5}
.main-area .page tbody tr:last-child td{border-bottom:0}
.main-area .page tbody tr:hover{background:color-mix(in srgb,var(--brand) 3%,var(--panel))}
.main-area .page .table-actions{display:flex;align-items:center;gap:6px}
.main-area .page .empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.app-shell .modal{border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px #0004}
.app-shell .modal-head{gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.app-shell .modal-head h3{font-size:18px;line-height:1.4;letter-spacing:-.02em}
@media(max-width:700px){.main-area .page-head{align-items:flex-start;gap:14px;margin-bottom:20px}.main-area .page-head h2{font-size:21px}.main-area .page-head .head-actions{width:100%}.main-area .page :is(th,td){padding:12px}.app-shell .modal{padding:18px}.app-shell :is(.page,.modal) .btn{min-height:42px}}
@media(prefers-reduced-motion:reduce){.app-shell :is(.page,.modal) :is(.btn,input,select,textarea){transition:none}}

/* Campos compostos do historico: borda e foco pertencem ao contorno externo. */
.main-area .page .contacts-filters{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.main-area .page .contacts-filters>label{min-width:0;height:44px;box-sizing:border-box;padding:0 12px;gap:10px;align-items:center;border-radius:9px}
.main-area .page .contacts-filters>label>svg{flex:0 0 16px;width:16px;height:16px;opacity:.85}
.app-shell .page .contacts-filters>label>:is(input,select){flex:1 1 0%;width:100%;min-width:0!important;min-height:0!important;height:40px;box-sizing:border-box;margin:0;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;font-size:12px;line-height:1.5;color:var(--text)}
.app-shell .page .contacts-filters>label>:is(input,select):focus-visible{border:0!important;box-shadow:none!important;outline:none!important}
.main-area .page .contacts-filters>label:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.main-area .page .contacts-filters>label:has(input[type=date])>svg{display:none}
.main-area .page .contacts-filters>label:has(input[title="Data inicial"])::before{content:'De';font-size:11px;font-weight:600;color:var(--muted);flex:0 0 auto}
.main-area .page .contacts-filters>label:has(input[title="Data final"])::before{content:'Até';font-size:11px;font-weight:600;color:var(--muted);flex:0 0 auto}
.main-area .page .contacts-filters input[type=date]{color-scheme:light}
.dark .main-area .page .contacts-filters input[type=date]{color-scheme:dark}
.main-area .page .contacts-filter-panel .filter-title{gap:12px;flex-wrap:wrap}
.main-area .page .contacts-filter-panel .filter-title .link-btn{min-height:30px;padding:4px 0;font-size:12px;white-space:nowrap}
@media(max-width:1100px){.main-area .page .contacts-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.main-area .page .contacts-filters{grid-template-columns:minmax(0,1fr)}.main-area .page .contacts-filter-panel{padding:14px}}

/* Auditoria: campos alinhados, datas identificadas e um contorno por controle. */
.main-area .page .audit-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(140px,1fr)) repeat(2,minmax(165px,1fr)) auto auto;gap:10px;align-items:center;padding:20px}
.main-area .page .audit-filters>label{display:flex;align-items:center;gap:10px;min-width:0;height:44px;box-sizing:border-box;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.main-area .page .audit-filters>label>svg{flex:0 0 16px;width:16px;height:16px;color:var(--muted)}
.app-shell .page .audit-filters>label>input{flex:1 1 0%;width:100%;min-width:0!important;min-height:0!important;height:40px;margin:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;color:var(--text);font-size:12px}
.main-area .page .audit-filters>label:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ui-focus)}
.main-area .page .audit-filters>label:has(input[type=date])>svg{display:none}
.main-area .page .audit-filters>label:has(input[type=date])::before{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--muted)}
.main-area .page .audit-filters>label:nth-of-type(2)::before{content:'De'}
.main-area .page .audit-filters>label:nth-of-type(3)::before{content:'Até'}
.app-shell .page .audit-filters>select,.app-shell .page .audit-filters>.btn{width:100%;min-width:0;height:44px;min-height:44px;box-sizing:border-box;margin:0;font-size:12px}
.main-area .page .audit-filters>.btn{justify-content:center;white-space:nowrap}
.main-area .page .audit-filters input[type=date]{color-scheme:light}
.dark .main-area .page .audit-filters input[type=date]{color-scheme:dark}
@media(max-width:1350px){.main-area .page .audit-filters{grid-template-columns:repeat(4,minmax(0,1fr))}.main-area .page .audit-filters>.audit-search{grid-column:span 2}}
@media(max-width:1000px){.main-area .page .audit-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.main-area .page .audit-filters>.audit-search{grid-column:1/-1}}
@media(max-width:600px){.main-area .page .audit-filters{grid-template-columns:minmax(0,1fr);padding:14px}.main-area .page .audit-filters>.audit-search{grid-column:auto}}

/* Busca de respostas rapidas: icone fixo e contorno unico. */
.main-area .page .canned-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.main-area .page .canned-toolbar>.search{display:flex;align-items:center;gap:10px;flex:1 1 280px;width:100%;max-width:600px;min-width:0;height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.main-area .page .canned-toolbar>.search>svg{flex:0 0 17px;width:17px;height:17px;color:var(--muted)}
.app-shell .page .canned-toolbar>.search>input{flex:1 1 0%;width:100%;min-width:0!important;min-height:0!important;height:40px;margin:0;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;color:var(--text);font-size:13px}
.main-area .page .canned-toolbar>.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ui-focus)}
.main-area .page .canned-toolbar>span{flex:0 0 auto;color:var(--muted);font-size:12px}
@media(max-width:600px){.main-area .page .canned-toolbar>.search{flex-basis:100%;max-width:none}}