:root{
  --bg:#07111f;--bg-deep:#040812;--panel:#0d1b2e;--panel-2:#12243e;--panel-soft:rgba(18,36,62,.86);
  --line:rgba(132,177,231,.18);--line-strong:rgba(142,197,255,.32);--text:#f4f8ff;--muted:#9fb2cc;
  --blue:#2d77c9;--blue-bright:#4ea2ff;--cyan:#38bdf8;--green:#12b981;--yellow:#f59e0b;--orange:#f97316;--red:#ef4444;--purple:#8b5cf6;
  --shadow:0 20px 55px rgba(0,0,0,.28);--shadow-hover:0 24px 68px rgba(0,0,0,.36);--radius:22px;--radius-sm:14px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 8% 0%,#164675 0,transparent 32%),radial-gradient(circle at 92% 18%,rgba(24,91,158,.24),transparent 28%),linear-gradient(145deg,#07111f 0,#050b15 62%,#03070d 100%);color:var(--text);opacity:.985}

body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 70%);z-index:-1}

a{color:inherit}
.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}

/* Shell e navegação */
.topbar{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 28px;background:rgba(5,12,23,.82);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 35px rgba(0,0,0,.18);backdrop-filter:blur(18px) saturate(1.2)}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand-logo{width:54px;height:54px;object-fit:contain;background:rgba(255,255,255,.97);border-radius:15px;padding:7px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.kicker,.eyebrow{color:#8ec5ff;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:900}
.topbar h1{margin:3px 0 0;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.main-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.main-nav a,.button,button{border:1px solid #2b5078;background:#0b1a2e;color:#e8f3ff;padding:10px 13px;border-radius:12px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.main-nav a:hover,.main-nav a.active,.button:hover,button:hover{background:#0a4f9e;border-color:#4ea2ff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(10,79,158,.22)}
.main-nav a.active{box-shadow:inset 0 -2px 0 #7dc7ff,0 8px 22px rgba(10,79,158,.16)}
.button.primary,button.primary{background:linear-gradient(135deg,#0b65c2,#0a4f9e);border-color:#4ea2ff}
.button.subtle{background:rgba(255,255,255,.045)}
.user-chip,.secure-chip,.count-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#dcecff;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800}
.secure-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,185,129,.12)}

.container{max-width:1600px;margin:0 auto;padding:26px 28px 40px}
.page-enter{transform:translateY(7px);opacity:0;transition:opacity .24s ease,transform .24s ease}
.app-ready .page-enter{transform:translateY(0);opacity:1}

/* Introdução */
.page-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:3px 0 20px;padding:6px 2px}
.page-intro h2{font-size:30px;margin:5px 0 5px;letter-spacing:-.03em}
.page-intro p{margin:0;color:var(--muted);max-width:760px}
.page-intro-actions{display:flex;gap:10px}
.portal-welcome{align-items:center}

/* Cards e KPIs */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{position:relative;background:linear-gradient(180deg,rgba(18,36,62,.93),rgba(9,20,36,.95));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:18px;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.035),transparent 34%);opacity:.7}
.inner-card{box-shadow:none;margin-bottom:0;background:rgba(255,255,255,.03);border-radius:18px}
.metric{display:flex;align-items:center;gap:14px;min-height:126px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.metric:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-hover)}
.metric::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:999px;background:var(--blue-bright)}
.metric-orange::before{background:var(--orange)}
.metric-cyan::before{background:var(--cyan)}
.metric-red::before{background:var(--red)}
.metric-green::before{background:var(--green)}
.metric-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(78,162,255,.11);border:1px solid rgba(78,162,255,.22);flex:0 0 auto}
.metric-orange .metric-icon{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.22)}
.metric-cyan .metric-icon{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.22)}
.metric-red .metric-icon{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.22)}
.metric-green .metric-icon{background:rgba(18,185,129,.1);border-color:rgba(18,185,129,.22)}
.metric-icon svg{width:23px;height:23px;fill:none;stroke:#9bd2ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.metric-orange .metric-icon svg{stroke:#fdba74}
.metric-cyan .metric-icon svg{stroke:#7dd3fc}
.metric-red .metric-icon svg{stroke:#fca5a5}
.metric-green .metric-icon svg{stroke:#6ee7b7}
.metric span{color:var(--muted);font-size:12px;font-weight:700}
.metric strong{display:block;font-size:29px;margin-top:5px;letter-spacing:-.03em}
.metric small{display:block;color:#8ec5ff;margin-top:4px;font-size:11px}
.money-kpi{font-size:20px!important;white-space:nowrap}

/* Cabeçalhos e filtros */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.section-head.compact{margin-bottom:12px}
.section-head h2{margin:3px 0 0;font-size:19px;letter-spacing:-.02em}
.section-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.text-link{color:#8ec5ff;text-decoration:none;font-weight:800;font-size:12px}
.text-link:hover{text-decoration:underline}
.filters form{display:grid;grid-template-columns:minmax(320px,2fr) minmax(170px,1fr) minmax(160px,1fr) auto;gap:10px}
.search-field{position:relative;display:block}
.search-field svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#7da4c9;stroke-width:1.8}
.search-field input{padding-left:40px}
input,select,textarea{width:100%;background:#081426;border:1px solid #24405f;color:var(--text);border-radius:13px;padding:11px 12px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;font:inherit}
textarea{resize:vertical;min-height:88px}
input:focus,select:focus,textarea:focus{border-color:#4ea2ff;box-shadow:0 0 0 3px rgba(78,162,255,.13);background:#0a1930}
select option{background:#0d1b2e;color:#fff}

/* Dashboard */
.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.72fr);gap:18px}
.dashboard-layout>.card{margin-bottom:0}
.claim-list{position:relative;z-index:1}
.claim-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid rgba(125,172,231,.15);background:rgba(255,255,255,.028);border-radius:17px;margin-bottom:10px;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.claim-row:hover{transform:translateY(-2px);background:rgba(255,255,255,.06);border-color:rgba(78,162,255,.34);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.claim-row-main{min-width:0}
.claim-arrow{font-size:24px;color:#6eaee9;opacity:0;transform:translateX(-5px);transition:.18s ease}
.claim-row:hover .claim-arrow{opacity:1;transform:translateX(0)}
.row-title{font-weight:900;font-size:15px}
.row-sub{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.45}
.row-sub b{color:#d9ebff}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:900;border-radius:999px;padding:6px 9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);line-height:1.15}
.large-badge{font-size:11px;padding:7px 10px}
.status{color:#d8ccff;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
.neutral{color:#d6e6f7}
.priority-low{color:#bfdbfe;background:rgba(59,130,246,.14);border-color:rgba(96,165,250,.28)}
.priority-medium{color:#fde68a;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.32)}
.priority-high{color:#fed7aa;background:rgba(249,115,22,.15);border-color:rgba(249,115,22,.34)}
.priority-critical,.danger{color:#fecaca;background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.36)}
.warning{color:#fde68a;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.34)}
.empty{padding:20px;text-align:center;color:var(--muted);border:1px dashed #315171;border-radius:16px;background:rgba(255,255,255,.025)}
.empty-state span{display:block;color:#dcecff;font-weight:900;margin-bottom:4px}
.empty-state p{margin:0;color:var(--muted)}
.barrow{display:grid;grid-template-columns:minmax(110px,160px) 1fr 32px;gap:10px;align-items:center;margin:13px 0}
.barrow span{color:#d7e8ff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow div{height:9px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.barrow i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 18px rgba(56,189,248,.22);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.barrow b{font-size:12px;color:#bcd6f2}
.insight-note{margin-top:20px;border:1px solid rgba(78,162,255,.18);background:rgba(78,162,255,.055);border-radius:15px;padding:13px}
.insight-note strong{font-size:12px;color:#9fd2ff}
.insight-note p{margin:5px 0 0;color:var(--muted);font-size:12px}

/* Detalhe */
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hero-claim{border-color:rgba(77,163,255,.28);background:radial-gradient(circle at 88% 20%,rgba(45,119,201,.22),transparent 28%),linear-gradient(180deg,rgba(18,36,62,.97),rgba(9,20,36,.96))}
.hero-main{min-width:0}
.claim-nickname{color:#fff;font-weight:950;font-size:23px;margin:5px 0 6px;letter-spacing:-.025em}
.detail-head h2{margin:0 0 8px;font-size:18px;color:#bcd9f5}
.detail-head p{color:#cbd9ed;margin:6px 0}
.hero-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px}
.hero-actions{display:flex;align-items:flex-end;gap:9px;flex-direction:column;min-width:max-content}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.info-box,.item,.timeline-item{position:relative;padding:13px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);border-radius:14px;margin-bottom:10px;color:#d7e8ff}
.info-box{margin-bottom:0;min-height:92px;transition:border-color .18s ease,background .18s ease}
.info-box:hover{border-color:rgba(78,162,255,.24);background:rgba(255,255,255,.045)}
.info-box h3,h3{color:#8ec5ff;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 7px}
.info-box p,.item p,p{line-height:1.5;color:#d7e8ff}
.info-box p{margin:0}
.info-box small{color:var(--muted)}
.wide{margin-top:12px}
.highlight-box{border-color:rgba(56,189,248,.24);background:rgba(56,189,248,.06)}
.item-link{display:block;text-decoration:none;transition:.18s ease}
.item-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.timeline{border-left:2px solid rgba(77,163,255,.32);padding-left:16px}
.timeline-item{position:relative;margin-bottom:12px}
.timeline-item::before{content:"";position:absolute;left:-23px;top:17px;width:10px;height:10px;border-radius:50%;background:#4ea2ff;box-shadow:0 0 0 4px rgba(77,163,255,.16)}
.timeline-item small{color:var(--muted)}
.timeline-item p{margin:7px 0 0}
.next-action-inline{margin-top:8px;color:#9fd2ff;font-size:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px}
.detail-tabs,.tabs{padding:0;overflow:visible}
.tabs>input{display:none}
.tab-buttons{display:flex;gap:8px;padding:15px 15px 0;overflow:auto}
.sticky-tabs{position:sticky;top:85px;z-index:80;padding:12px 15px;background:rgba(9,20,36,.9);border-bottom:1px solid rgba(255,255,255,.075);backdrop-filter:blur(14px);border-radius:21px 21px 0 0}
.tab-buttons label,.portal-tab-btn{white-space:nowrap;border:1px solid #2b5078;background:#0b1a2e;color:#e8f3ff;padding:10px 13px;border-radius:12px;font-weight:850;cursor:pointer;width:auto;transition:.17s ease}
.tab-buttons label:hover,.portal-tab-btn:hover,.portal-tab-btn.active{background:#0a4f9e;border-color:#4ea2ff;transform:translateY(-1px)}
.tab-panel{display:none;padding:16px;animation:panel-in .2s ease both}
.tabs #tab-resumo:checked~.tab-buttons label[for=tab-resumo],.tabs #tab-docs:checked~.tab-buttons label[for=tab-docs],.tabs #tab-movs:checked~.tab-buttons label[for=tab-movs],.tabs #tab-fotos:checked~.tab-buttons label[for=tab-fotos]{background:#0a4f9e;border-color:#4ea2ff}
.tabs #tab-resumo:checked~.panel-resumo,.tabs #tab-docs:checked~.panel-docs,.tabs #tab-movs:checked~.panel-movs,.tabs #tab-fotos:checked~.panel-fotos{display:block}
.portal-panel{padding:18px;animation:panel-in .2s ease both}
.portal-panel[hidden]{display:none!important}
@keyframes panel-in{from{opacity:0;transform:translateY(5px)}
to{opacity:1;transform:none}
}

/* Ações e mídia */
.mini-button{display:inline-block;margin-top:8px;padding:7px 10px;font-size:11px}
.copy-btn,.email-share-btn,.email-fake-btn,.whatsapp-share-btn{white-space:nowrap;font-size:11px;padding:8px 10px}
.email-share-btn,.email-fake-btn{background:#13243d;border-color:#395a83}
.whatsapp-share-btn{background:#0f3f2e;border-color:#2f8f68;color:#e8fff4}
.whatsapp-share-btn:hover{background:#16845b;border-color:#4fd09b}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.portal-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-card{border:1px solid rgba(255,255,255,.1);border-radius:17px;overflow:hidden;background:rgba(255,255,255,.035);transition:.18s ease}
.photo-card:hover{transform:translateY(-2px);border-color:rgba(78,162,255,.28)}
.photo-card img{display:block;width:100%;height:220px;object-fit:cover;background:#050911}
.photo-caption{padding:12px;color:#d7e8ff}
.photo-caption small{color:var(--muted)}
.photo-caption p{margin:8px 0 0}
.payment{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;margin-bottom:14px;background:rgba(255,255,255,.03)}
.payment-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.payment-head span{color:var(--muted)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid rgba(255,255,255,.08);padding:10px;text-align:left}
th{color:#8ec5ff;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.value-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px;border:1px solid rgba(18,185,129,.24);border-radius:16px;background:linear-gradient(120deg,rgba(18,185,129,.1),rgba(56,189,248,.06));margin-bottom:18px}
.value-hero span{color:#a9c2d9;font-weight:800}
.value-hero strong{font-size:24px}
.message-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:16px}
.portal-form,.portal-upload-form{display:grid;gap:10px}
.portal-form label{font-weight:800;color:#b8d5f1;font-size:12px}
.portal-upload-form{border-top:1px solid rgba(255,255,255,.08);padding-top:11px;margin-top:11px}
.document-item{padding:14px}
.upload-card{align-self:start}

/* Login do portal */
.login-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.72fr);gap:18px;max-width:1120px;margin:32px auto}
.login-story{min-height:520px;display:flex;flex-direction:column;justify-content:center;padding:38px;background:radial-gradient(circle at 80% 15%,rgba(56,189,248,.16),transparent 28%),linear-gradient(145deg,rgba(17,47,81,.98),rgba(8,20,37,.98))}
.login-story h2{font-size:38px;max-width:560px;margin:8px 0 12px;line-height:1.08;letter-spacing:-.04em}
.login-story>p{max-width:660px;color:#b9cde2}
.login-feature-list{display:grid;gap:12px;margin-top:24px}
.login-feature-list>div{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.login-feature-list span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(78,162,255,.13);color:#8ec5ff;font-size:11px;font-weight:900}
.login-feature-list p{margin:0;color:#aebfd2;font-size:12px}
.login-feature-list strong{color:#eff7ff}
.trust-line{display:flex;align-items:center;gap:9px;margin-top:24px;color:#a9c2d9;font-size:12px}
.portal-login-card{display:flex;flex-direction:column;justify-content:center;padding:34px}
.login-card-head h2{font-size:30px;margin:7px 0}
.login-card-head p{color:var(--muted)}
.login-form{margin-top:20px}
.password-wrap{position:relative}
.password-wrap input{padding-right:72px}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:6px 8px;border-radius:8px;font-size:10px;background:transparent;border-color:transparent;color:#8ec5ff}
.password-toggle:hover{transform:translateY(-50%);background:rgba(78,162,255,.1);box-shadow:none}
.login-submit{margin-top:6px;padding:12px}
.login-help{font-size:11px;color:var(--muted);margin-top:17px}

/* Avisos e toasts */
.notice{border-radius:16px;padding:13px 15px;margin:0 0 18px;border:1px solid rgba(255,255,255,.14);line-height:1.45}
.alert-green{background:rgba(18,185,129,.12);border-color:rgba(18,185,129,.35);color:#dcfce7}
.alert-yellow{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.38);color:#fef3c7}
.alert-red{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.42);color:#fee2e2}
.toast-stack{position:fixed;right:20px;top:92px;z-index:12000;display:grid;gap:9px;pointer-events:none}
.toast{min-width:260px;max-width:420px;padding:12px 14px;border-radius:13px;background:#10243d;border:1px solid #31577e;box-shadow:0 18px 45px rgba(0,0,0,.34);color:#eaf5ff;font-size:12px;font-weight:750;opacity:0;transform:translateX(18px);transition:.2s ease}
.toast.show{opacity:1;transform:none}
.toast.success{border-color:rgba(18,185,129,.45);background:#0d3128}
.toast.error{border-color:rgba(239,68,68,.46);background:#3a171c}
.toast.warning{border-color:rgba(245,158,11,.45);background:#3b2a10}

/* Modal e relatório */
.report-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}
.report-btn{background:#0a4f9e;border-color:#4ea2ff}
.report-modal{visibility:hidden;opacity:0;position:fixed;z-index:9999;inset:0;background:rgba(0,0,0,.72);padding:28px;overflow:auto;transition:opacity .2s ease,visibility .2s ease}
.report-modal.is-open{visibility:visible;opacity:1}
.report-modal-box{max-width:980px;margin:0 auto;background:#0d1b2e;border:1px solid rgba(113,161,219,.32);border-radius:22px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.55);transform:scale(.985) translateY(7px);transition:.22s ease}
.report-modal.is-open .report-modal-box{transform:none}
.report-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.report-options label{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:10px;color:#d7e8ff}
.report-options input{width:auto}
.report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.report-preview{white-space:pre-wrap;background:#061224;border:1px solid #24405f;border-radius:16px;color:#e8f3ff;padding:16px;max-height:420px;overflow:auto;font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.45}

.report-rendered{background:#f5f7fb;color:#0f172a;border:1px solid rgba(255,255,255,.14);border-radius:18px;max-height:70vh;overflow:auto;padding:18px}
.claim-report{background:#fff;color:#172033;border:1px solid #d9e2ef;border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.18);padding:26px;max-width:980px;margin:0 auto;font-family:"Segoe UI",Roboto,Arial,sans-serif}
.claim-report *{box-sizing:border-box}
.claim-report h1,.claim-report h2,.claim-report h3,.claim-report p{color:#172033}
.claim-report-header{display:flex;gap:18px;align-items:center;border-bottom:3px solid #1d4f8f;padding-bottom:16px;margin-bottom:16px}
.claim-report-logo-wrap{width:100px;min-width:100px;max-width:100px;overflow:hidden}
.claim-report-logo{width:96px!important;max-width:96px!important;max-height:62px!important;object-fit:contain!important}
.claim-report-title-block h1{font-size:24px;margin:0 0 6px;color:#0c2f5c}
.claim-report-title-block h2{font-size:18px;margin:0 0 6px}
.claim-report-title-block p{margin:0;color:#64748b}
.claim-report-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 20px}
.claim-report-meta div,.report-grid div,.report-text-block{border:1px solid #d7e0ed;background:#f8fafc;border-radius:12px;padding:10px}
.claim-report-meta .wide-meta{grid-column:span 2}
.claim-report span,.report-grid span,.report-text-block span{display:block;color:#456179;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin-bottom:4px}
.claim-report strong{font-size:14px;color:#172033}
.claim-report-section{margin-top:18px;padding-top:14px;border-top:1px solid #d9e2ef}
.claim-report-section h2{font-size:19px;color:#0c2f5c;margin:0 0 12px}
.claim-report-section h3{font-size:13px;color:#1d4f8f;margin:18px 0 8px}
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-grid p,.report-text-block p{margin:0;line-height:1.45;color:#172033}
.report-grid em,.report-text-block em{color:#64748b;font-style:normal}
.report-text-block{margin-top:10px}
.report-list{display:grid;gap:8px}
.report-list-item{border:1px solid #d7e0ed;background:#fff;border-radius:10px;padding:10px;color:#172033;line-height:1.45}
.report-empty{border:1px dashed #b7c6d9;background:#f8fafc;border-radius:10px;padding:12px;color:#64748b}
.report-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #d7e0ed}
.report-table th{background:#edf4ff;color:#0c2f5c;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.report-table th,.report-table td{border:1px solid #d7e0ed;color:#172033;vertical-align:top;padding:9px}
.report-table em{font-style:normal;color:#64748b}
.report-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.report-photo-card{border:1px solid #d7e0ed;border-radius:12px;overflow:hidden;background:#fff}
.report-photo-card img{width:100%;height:220px;object-fit:cover;display:block}
.report-photo-card p{padding:10px;margin:0;color:#172033}
.report-photo-card span{display:inline;color:#64748b;text-transform:none;letter-spacing:0;font-size:12px}
.claim-report-footer{margin-top:24px;padding-top:12px;border-top:1px solid #d9e2ef;color:#64748b;display:flex;justify-content:space-between;gap:12px;font-size:12px}
.report-download{background:#eef3f9!important}
.report-download-wrap{padding:24px}
.report-rendered .empty{background:#fff;color:#64748b;border-color:#cbd5e1}

/* Responsividade */
@media(max-width:1250px){.kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.money-kpi{white-space:normal}
.layout{grid-template-columns:1fr .75fr}
}

@media(max-width:980px){.cards,.kpi-grid-5,.layout,.grid-2,.grid-3,.filters form,.login-stage,.message-layout{grid-template-columns:1fr}
.topbar{align-items:flex-start;flex-direction:column}
.main-nav{width:100%}
.container{padding:20px 16px 34px}
.detail-head{flex-direction:column}
.hero-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
.photo-grid,.portal-photo-grid{grid-template-columns:1fr}
.section-head{align-items:flex-start;flex-direction:column}
.section-actions{justify-content:flex-start}
.report-toolbar{justify-content:flex-start}
.report-options{grid-template-columns:1fr}
.sticky-tabs{top:142px}
.login-story{min-height:auto;padding:26px}
.login-story h2{font-size:31px}
.portal-login-card{padding:26px}
}

@media(max-width:620px){.topbar{padding:13px 16px}
.brand-logo{width:46px;height:46px}
.topbar h1{font-size:20px}
.main-nav a{font-size:11px;padding:8px 10px}
.page-intro{align-items:flex-start;flex-direction:column}
.page-intro h2{font-size:26px}
.metric{min-height:110px}
.claim-row{align-items:flex-start}
.claim-arrow{display:none}
.barrow{grid-template-columns:105px 1fr 26px}
.sticky-tabs{top:152px}
.tab-buttons{padding-inline:10px}
.portal-panel,.tab-panel{padding:12px}
.value-hero{align-items:flex-start;flex-direction:column}
.toast-stack{left:12px;right:12px;top:auto;bottom:16px}
.toast{min-width:0;max-width:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.page-enter{opacity:1;transform:none}
}

@media print{body.report-printing{background:#fff!important}
body.report-printing .topbar,body.report-printing .container>section:not(#report-modal),body.report-printing .report-modal-title,body.report-printing .report-options,body.report-printing .report-actions{display:none!important}
body.report-printing .container{padding:0!important}
body.report-printing .report-modal{visibility:visible!important;opacity:1!important;position:static!important;background:#fff!important;padding:0!important;overflow:visible!important}
body.report-printing .report-modal-box{transform:none!important;box-shadow:none!important;border:0!important;padding:0!important;max-width:none!important;background:#fff!important}
body.report-printing .report-rendered{max-height:none!important;overflow:visible!important;padding:0!important;border:0!important;background:#fff!important}
body.report-printing .claim-report{box-shadow:none!important;border:0!important;border-radius:0!important;max-width:none!important}
body.report-printing .claim-report-section{break-inside:avoid}
.claim-report{font-size:12px}
.report-photo-card img{height:160px}
}

/* Barra de abas internas alinhada ao mesmo Design System */
.tabs>.tab-buttons{position:sticky;top:85px;z-index:75;background:rgba(9,20,36,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:12px}


/* v12 — Portal ativo e comunicação de sinistros */
.portal-welcome-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.notice-cta{box-shadow:0 10px 28px rgba(24,119,242,.2)}
.notice-alerts-card{margin-bottom:18px;border-color:rgba(245,158,11,.28);background:linear-gradient(180deg,rgba(37,27,10,.58),rgba(12,25,43,.94))}
.notice-alerts-card .alert-count{border-color:rgba(245,158,11,.32);color:#ffd99a}
.notice-alert-list{display:grid;gap:10px}
.notice-alert-row{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;padding:13px 14px;border:1px solid rgba(245,158,11,.2);border-radius:15px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:.18s ease}
.notice-alert-row:hover{transform:translateY(-2px);border-color:rgba(245,158,11,.46);background:rgba(245,158,11,.065)}
.notice-alert-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);color:#ffd38a;font-weight:900}
.notice-alert-copy{display:grid;gap:3px;min-width:0}
.notice-alert-copy strong{color:#f8fbff}
.notice-alert-copy span{color:#c7d9ed;font-size:13px}
.notice-alert-copy small{color:#8fa8c1}
.notice-alert-action{color:#ffd18a;font-size:12px;font-weight:800;white-space:nowrap}

.portal-notices-card{margin-bottom:18px}
.portal-notice-list{display:grid;gap:9px}
.portal-notice-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 13px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.025);color:inherit;text-decoration:none;transition:.18s ease}
.portal-notice-row:hover{transform:translateY(-2px);border-color:rgba(80,157,255,.34);background:rgba(55,125,216,.06)}
.portal-notice-row>div:first-child{display:grid;gap:4px}
.portal-notice-row strong{color:#f1f7ff}
.portal-notice-row span{color:#9fb6cf;font-size:12px}

.notice-form{display:grid;gap:16px}
.notice-form-card{padding:20px}
.notice-form-grid{display:grid;gap:14px}
.notice-form-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.full-span{grid-column:1/-1}
.field-wrap{display:grid;gap:7px;color:#d9e8f8;font-weight:700;font-size:12px}
.field-wrap>span{font-size:12px;text-transform:uppercase;letter-spacing:.055em;color:#aac0d7}
.field-wrap small{font-weight:500;color:#849db6;line-height:1.45}
.field-wrap input,.field-wrap select,.field-wrap textarea,.notice-form-card input,.notice-form-card select,.notice-form-card textarea,.conversion-card input,.conversion-card select,.conversion-card textarea{width:100%;box-sizing:border-box;border:1px solid rgba(108,149,194,.34);border-radius:12px;background:#eef4fb;color:#10243d;padding:11px 12px;font:inherit;outline:none;transition:.16s ease}
.field-wrap input:focus,.field-wrap select:focus,.field-wrap textarea:focus,.notice-form-card input:focus,.notice-form-card select:focus,.notice-form-card textarea:focus,.conversion-card input:focus,.conversion-card select:focus,.conversion-card textarea:focus{border-color:#3e8de8;box-shadow:0 0 0 3px rgba(62,141,232,.15);background:#fff}
.field-error{color:#ffaaa8!important;font-weight:700!important}
.form-errors{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.09);color:#ffd4d4;border-radius:12px;padding:12px 14px}

.async-location{position:relative}
.location-search-field{max-width:none}
.async-results{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:150;background:#0b1b2f;border:1px solid #315578;border-radius:15px;box-shadow:0 20px 50px rgba(0,0,0,.38);padding:7px;max-height:340px;overflow:auto}
.async-result{display:grid;width:100%;gap:3px;text-align:left;background:transparent;border:0;border-radius:10px;padding:10px 11px;color:#e9f4ff;cursor:pointer}
.async-result:hover{background:rgba(71,143,227,.11)}
.async-result span{font-size:12px;color:#aec2d7}
.async-result small{font-size:11px;color:#7892ad}
.async-empty{padding:13px;color:#a9bfd6;font-size:12px}
.selected-location{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;padding:11px 12px;border-radius:12px;border:1px solid rgba(47,191,137,.3);background:rgba(47,191,137,.07)}
.selected-location>div{display:grid;gap:3px}
.selected-location strong{color:#e8fff5}
.selected-location span{font-size:12px;color:#9dc7b7}
.selected-location button{width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.or-divider{display:flex;align-items:center;gap:10px;margin:15px 0;color:#7892ab;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.or-divider::before,.or-divider::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}

.upload-dropzone{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px;border:1px dashed rgba(85,157,237,.42);border-radius:16px;background:rgba(65,132,211,.05)}
.upload-dropzone strong{color:#edf6ff}
.upload-dropzone p{margin:4px 0 0;color:#93acc5;font-size:12px}
.upload-dropzone input[type=file]{max-width:360px;color:#dcecff;background:#0c2037;border:1px solid rgba(96,151,209,.28);padding:8px;border-radius:11px}
.upload-rules{display:block;margin-top:9px;color:#8098b0}
.selected-files{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:12px}
.selected-file{display:flex;gap:9px;align-items:center;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.025)}
.selected-file>span{color:#52d39b;font-weight:900}
.selected-file div{display:grid;gap:2px;min-width:0}
.selected-file strong{font-size:12px;color:#e5f1ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selected-file small{color:#7f9ab6}
.notice-submit-bar{position:sticky;bottom:14px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border:1px solid rgba(93,155,222,.28);border-radius:16px;background:rgba(8,21,37,.94);backdrop-filter:blur(14px);box-shadow:0 18px 55px rgba(0,0,0,.34)}
.notice-submit-bar>div{display:grid;gap:3px}
.notice-submit-bar strong{color:#f1f7ff}
.notice-submit-bar span{font-size:12px;color:#91a9c1}
.notice-submit:disabled{opacity:.65;cursor:wait}

.confirmation-stage{max-width:920px;margin:24px auto}
.confirmation-card{padding:30px;text-align:left}
.confirmation-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:rgba(27,190,126,.12);border:1px solid rgba(27,190,126,.35);color:#65e4b2;font-size:28px;font-weight:900;margin-bottom:16px}
.confirmation-card h2{font-size:31px;margin:5px 0 16px}
.confirmation-card p{color:#bdd0e3;line-height:1.65;max-width:820px}
.confirmation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0}
.confirmation-summary>div{display:grid;gap:5px;padding:12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.confirmation-summary span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#809ab4;font-weight:800}
.confirmation-summary strong{color:#edf6ff;font-size:13px}
.confirmation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.simple-modal{visibility:hidden;opacity:0;position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:20px;transition:.18s ease}
.simple-modal.is-open{visibility:visible;opacity:1}
.simple-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.simple-modal-box{position:relative;z-index:1;width:min(760px,100%);max-height:82vh;overflow:auto;padding:24px;border-radius:20px;background:#0e2036;border:1px solid #31597f;box-shadow:0 28px 75px rgba(0,0,0,.52);transform:scale(.985) translateY(7px);transition:.18s ease}
.simple-modal.is-open .simple-modal-box{transform:none}
.modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05);color:#fff;font-size:20px;cursor:pointer}
.modal-note{color:#a8bdd2;line-height:1.55}
.habitual-doc-list{display:grid;gap:8px;margin-top:14px}
.habitual-doc-item{display:flex;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.habitual-doc-item>span{color:#55d5a0;font-weight:900}
.habitual-doc-item>div{display:grid;gap:3px}
.habitual-doc-item strong{color:#edf7ff}
.habitual-doc-item small{color:#8fa8c1}

.communication-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:20px}
.communication-hero-main h2{margin:8px 0 4px}
.communication-hero-main p{margin:0;color:#9fb5cc}
.communication-email-state{display:grid;gap:3px;text-align:right}
.communication-email-state span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7f99b3}
.communication-email-state strong{color:#e8f3ff}
.communication-email-state small{color:#849cb5}
.communication-layout{align-items:start}
.conversion-card{position:sticky;top:104px}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.summary-grid>div{padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.025)}
.summary-grid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8097b0;margin-bottom:4px}
.summary-grid strong{color:#eaf4ff}
.document-compact-list{display:grid;gap:7px}
.document-compact-row{display:flex;justify-content:space-between;gap:12px;padding:10px 11px;border-radius:11px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025);color:inherit;text-decoration:none}
.document-compact-row strong{color:#eaf4ff;font-size:12px}
.document-compact-row span{color:#8fa8c0;font-size:11px}

@media(max-width:980px){.notice-form-grid.two-cols,.confirmation-summary,.summary-grid{grid-template-columns:1fr 1fr}.notice-alert-row{grid-template-columns:42px 1fr}.notice-alert-action{grid-column:2}.communication-hero{align-items:flex-start;flex-direction:column}.communication-email-state{text-align:left}.conversion-card{position:static}.portal-welcome-actions{justify-content:flex-start}}
@media(max-width:620px){.notice-form-grid.two-cols,.confirmation-summary,.summary-grid{grid-template-columns:1fr}.upload-dropzone,.notice-submit-bar,.portal-notice-row{align-items:flex-start;flex-direction:column}.notice-alert-row{grid-template-columns:1fr}.notice-alert-icon{display:none}.notice-alert-action{grid-column:auto}.notice-submit-bar{bottom:8px}.confirmation-card{padding:20px}.confirmation-card h2{font-size:25px}}
.upload-select-button{position:relative;overflow:hidden;white-space:nowrap;cursor:pointer;background:#144f89;border-color:#3a83ca;color:#f4f9ff!important}
.upload-select-button input[type=file]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;padding:0!important;border:0!important}
.selected-file button{margin-left:auto;width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#dceaff;cursor:pointer}
.selected-file button:hover{border-color:rgba(239,68,68,.35);color:#ffb7b7;background:rgba(239,68,68,.08)}

/* v12.1 — feedback explícito de validação da comunicação de sinistro */
.notice-form-error-summary {
  display: grid;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(239, 68, 68, .42);
  border-radius: var(--radius-lg, 16px);
  background: rgba(127, 29, 29, .18);
  color: var(--text, #f8fafc);
}
.notice-form-error-summary strong { color: #fecaca; }
.notice-form-error-summary span,
.notice-form-error-summary small { color: var(--muted, #cbd5e1); }


/* v12.2 — estimativa na comunicação de sinistro */
.currency-input-wrap {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-left: .85rem;
  border: 1px solid var(--border, rgba(148, 163, 184, .32));
  border-radius: var(--radius, 12px);
  background: var(--surface, #fff);
}
.currency-input-wrap > span {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--muted, #64748b);
}
.currency-input-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.currency-input-wrap:focus-within {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Retorno da busca de CEP (core/js/cep.js).

   Ele é posicionado de forma absoluta, ancorado na linha do rótulo do campo, e
   isso não é firula: o .field-wrap é um grid e o rótulo é uma linha de texto de
   altura fixa. Qualquer elemento que participe do fluxo — mesmo um <small> de
   11px na mesma linha — aumenta a caixa da linha e desloca a coluna vizinha e
   todas as linhas de baixo. Fora do fluxo, a contribuição é exatamente zero.
   Medido com navegador: célula de 59px antes e depois, campos alinhados. */
.com-cep-aviso {
  position: relative;
  padding-right: 11em;
}
.cep-aviso {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #849db6;
}
.cep-aviso--ok { color: #64d29b; }
.cep-aviso--erro { color: #ffaaa8; }


/* ==========================================================================
   PARTE IDENTIDADE — Modelo 1, "Continuidade institucional"   (01/09/2026)

   Traz a aplicação inteira para a identidade do site novo: claro dominante,
   faixa navy no cabeçalho, olho de seção e a grade de linhas encostada.

   Nasceu valendo só para o Portal do Segurado (.app-shell). Em 01/09/2026
   passou a valer também para o lado interno da M&A, que continuava no tema
   escuro antigo — quem clicava em "Ver o site" dentro do admin caía num
   sistema com outra cara. Duas caras para o mesmo produto não é identidade.

   O prefixo agora é .app-shell, a classe que os DOIS corpos já carregavam:
   `app-shell portal-shell` e `app-shell internal-shell`. Não é truque de
   seletor — é o reconhecimento de que a identidade pertence ao produto, e não
   a um dos lados dele. Esta parte é a ÚLTIMA do arquivo, então vence as
   regras escuras acima por ordem, sem precisar de !important.

   O que é específico de um lado fica prefixado por .app-shell ou
   .internal-shell, mais abaixo.

   Cores: as do site (ma.css), nunca as do logo. Ver identidade-no-repositorio.
   ========================================================================== */

.app-shell {
  --pt-azul: #2a67bc;
  --pt-navy: #203864;
  --pt-navy-escuro: #202945;
  --pt-verde: #00a884;
  --pt-fundo: #f5f7fa;
  --pt-papel: #ffffff;
  --pt-linha: #dfe6ef;          /* a "borda" da grade é este fundo aparecendo */
  --pt-tinta: #202945;
  --pt-tinta-media: #56617a;
  --pt-tinta-fraca: #56617a;
  --pt-azul-claro: #a8c4e8;     /* olho sobre faixa escura — 6,5:1 no navy */
  --pt-largura: 1400px;

  /* Redefinição dos tokens do tema escuro DENTRO do portal.
     É isto que conserta o contraste de uma vez: as regras acima leem
     var(--muted), var(--text), var(--line); trocar o valor na raiz do portal
     acerta todas elas ao mesmo tempo, em vez de caçar seletor por seletor.
     --muted #9fb2cc sobre branco dava 2,4:1 — reprovado em qualquer critério. */
  --text: #202945;
  --muted: #56617a;             /* 5,9:1 no branco, 5,6:1 no cinza do fundo */
  --line: #dfe6ef;
  --line-strong: #c3d3e6;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --panel-soft: #f7f9fc;
  --blue: #2a67bc;
  --blue-bright: #21539b;
  --green: #00a884;
  --shadow: none;
  --shadow-hover: none;
  --radius: 0;
  --radius-sm: 0;
}

/* -- Casca ---------------------------------------------------------------- */

body.app-shell {
  background: var(--pt-fundo);
  color: var(--pt-tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  opacity: 1;
}
/* A malha de pontos do tema escuro não faz sentido sobre fundo claro. */
body.app-shell::before { display: none; }

.app-shell .topbar {
  background: var(--pt-navy);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 28px;
  min-height: 72px;
}
.app-shell .brand { color: #ffffff; gap: 13px; }
.app-shell .brand-logo {
  width: 42px; height: 42px; border-radius: 8px; padding: 5px;
  background: #ffffff; box-shadow: none;
}
.app-shell .kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pt-azul-claro); font-weight: 500;
}
.app-shell .topbar h1 { font-size: 17px; font-weight: 700; color: #ffffff; margin: 2px 0 0; }

.app-shell .main-nav a {
  color: #cfdcec; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; box-shadow: none; transform: none;
}
.app-shell .main-nav a:hover {
  color: #ffffff; background: #2d446d; border-bottom-color: transparent;
  box-shadow: none; transform: none;
}
.app-shell .main-nav a.active {
  color: #ffffff; background: transparent; box-shadow: none;
  border-bottom-color: var(--pt-azul);
}

.app-shell .container { max-width: var(--pt-largura); padding: 32px 28px 56px; }

/* -- Olho de seção -------------------------------------------------------- */

.app-shell .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pt-azul); font-weight: 500; display: block; margin-bottom: 8px;
}
.app-shell h2 { color: var(--pt-tinta); letter-spacing: -.015em; }
.app-shell .page-intro h2 { font-size: 30px; }
.app-shell .page-intro p,
.app-shell .section-head p { color: var(--pt-tinta-media); }

/* -- Superfícies: papel branco sobre fio, sem cartão flutuante ------------- */

.app-shell .card {
  background: var(--pt-papel);
  border: 1px solid var(--pt-linha);
  border-radius: 0;
  box-shadow: none;
}
.app-shell .inner-card { background: var(--pt-papel); border-radius: 0; }
.app-shell .empty, .app-shell .empty-state { color: var(--pt-tinta-fraca); }
.app-shell .text-link { color: var(--pt-azul); }
.app-shell .count-chip {
  background: var(--pt-papel); border: 1px solid var(--pt-linha);
  color: var(--pt-tinta-fraca); border-radius: 0; font-weight: 600;
}

/* -- Indicadores: grade de linhas, não quatro cartões soltos --------------- */

.app-shell .cards.kpi-grid {
  gap: 1px; background: var(--pt-linha); border: 1px solid var(--pt-linha); margin-bottom: 36px;
}
.app-shell .cards.kpi-grid .card.metric {
  background: var(--pt-papel); border: 0; margin: 0; min-height: 0;
  padding: 20px 22px; border-radius: 0; box-shadow: none; transform: none;
}
.app-shell .metric span { color: var(--pt-tinta-fraca); font-size: 12px; }
.app-shell .metric strong { color: var(--pt-tinta); font-size: 32px; }
.app-shell .metric small { color: var(--pt-tinta-fraca); font-size: 11px; }
.app-shell .cards.kpi-grid .card.metric::before { display: none; }
.app-shell .metric-icon {
  background: #eef3fa; border: 1px solid #dae5f3; border-radius: 8px; color: var(--pt-azul);
}
.app-shell .metric-icon svg { stroke: var(--pt-azul); }
/* A cor de atenção acompanha o SIGNIFICADO, não a classe herdada do tema
   escuro: quem pede ação do segurado é "Documentos pendentes" (.metric-cyan),
   não "Movimentações" (.metric-orange). */
.app-shell .metric-cyan strong { color: #b45309; }
.app-shell .metric-orange strong { color: var(--pt-tinta); }
.app-shell .metric-green strong { color: #00806a; }
.app-shell .metric-cyan .metric-icon { background: #fdf3e7; border-color: #f0dcc0; }
.app-shell .metric-cyan .metric-icon svg { stroke: #b45309; }
.app-shell .money-kpi { font-size: 24px !important; }

/* -- Grade de linhas: a lista de processos --------------------------------
   As bordas são o fundo aparecendo (gap 1px sobre .linha), como no site: sem
   borda dupla, sem :last-child, em qualquer número de linhas.               */

.app-shell .claim-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--pt-linha);
  /* Encostada nas bordas do cartão: a moldura do cartão já é a da lista. */
  margin: 0 -18px -18px; border-top: 1px solid var(--pt-linha);
}
.app-shell .claim-row {
  position: relative; overflow: hidden;
  background: var(--pt-papel); border: 0; border-radius: 0; margin: 0;
  padding: 20px 24px; align-items: flex-start; transition: background .18s ease;
}
.app-shell .claim-row:hover { background: #f7fafd; transform: none; box-shadow: none; }
/* A linha azul cresce por width, da esquerda para a direita — sentido da
   leitura. Com transform: scaleX ela nasceria do centro para os dois lados. */
.app-shell .claim-row::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--pt-azul); transition: width .3s ease;
}
.app-shell .claim-row:hover::after { width: 100%; }
.app-shell .row-title { color: var(--pt-tinta); font-size: 17px; font-weight: 700; }
.app-shell .row-sub { color: var(--pt-tinta-media); font-size: 13px; }
.app-shell .row-sub b { color: var(--pt-tinta); }
.app-shell .claim-arrow { color: var(--pt-azul); opacity: 1; transform: none; align-self: center; }
.app-shell .claim-nickname { color: var(--pt-tinta); }

@media (prefers-reduced-motion: reduce) {
  .app-shell .claim-row::after { transition: none; }
  .app-shell .claim-row:hover::after { width: 100%; }
}

/* -- Etiquetas ------------------------------------------------------------ */

.app-shell .badge {
  border-radius: 3px; border: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding: 5px 9px; background: #f1f4f8; color: var(--pt-tinta-media);
}
.app-shell .badge.status { background: #e8f0fb; color: #1c4d94; }
.app-shell .badge.neutral { background: #f1f4f8; color: var(--pt-tinta-media); letter-spacing: 0; }
.app-shell .priority-low { background: #eef2f7; color: #4a5570; }
.app-shell .priority-medium { background: #eef2f7; color: #4a5570; }
.app-shell .priority-high { background: #fff4e5; color: #8a4b06; }
.app-shell .priority-critical { background: #fdecec; color: #a01b1b; }

/* -- Botões --------------------------------------------------------------- */

/* `button` puro entra na lista: no lado interno há botões sem classe nenhuma
   (o modal de relatório, o "ver mais"), e sem isto eles continuavam lendo a
   regra escura do topo do arquivo. As abas e o alternador de senha vêm depois
   e continuam ganhando por ordem. */
.app-shell .button,
.app-shell button,
.app-shell button.primary,
.app-shell .button.primary {
  border-radius: 0; border: 1px solid var(--pt-linha); background: var(--pt-papel);
  color: var(--pt-tinta); font-weight: 400; min-height: 44px; box-shadow: none;
}
.app-shell .button:hover { background: #eef3fa; border-color: #c3d3e6; }
.app-shell .primary,
.app-shell .button.primary,
.app-shell button.primary {
  background: var(--pt-azul); border-color: var(--pt-azul); color: #ffffff;
}
.app-shell .primary:hover,
.app-shell .button.primary:hover,
.app-shell button.primary:hover { background: #21539b; border-color: #21539b; }
.app-shell .mini-button { min-height: 36px; }
.app-shell .secure-chip, .app-shell .trust-line { color: var(--pt-tinta-fraca); font-size: 12px; }
.app-shell .secure-dot { background: var(--pt-verde); box-shadow: 0 0 0 4px rgba(0,168,132,.12); }

/* -- Formulários ---------------------------------------------------------- */

.app-shell .field-wrap { color: var(--pt-tinta); }
.app-shell .field-wrap > span,
.app-shell .portal-form label {
  color: var(--pt-tinta); font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.app-shell input, .app-shell select, .app-shell textarea {
  background: var(--pt-papel) !important; color: var(--pt-tinta) !important;
  border: 1px solid #ccd6e4 !important; border-radius: 0 !important; min-height: 44px;
}
.app-shell textarea { min-height: 96px; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus {
  border-color: var(--pt-azul) !important; box-shadow: 0 0 0 3px rgba(42,103,188,.14) !important;
}
.app-shell input::placeholder, .app-shell textarea::placeholder { color: #79839a; }
.app-shell .field-error { color: #b91c1c !important; }
.app-shell .form-errors {
  background: #fdf2f2; border: 1px solid #f2c9c9; color: #8c1d1d; border-radius: 0;
}
.app-shell .password-toggle { color: var(--pt-azul); background: transparent; border: 0; font-weight: 700; }
.app-shell .search-field svg { color: #9aa6ba; }
.app-shell .currency-input-wrap span { color: var(--pt-tinta-fraca); }

/* Retorno da busca de CEP sobre fundo claro (a regra base está na parte acima,
   pensada para o tema escuro do lado interno). */
.app-shell .cep-aviso { color: var(--pt-tinta-fraca); }
.app-shell .cep-aviso--ok { color: #00806a; }
.app-shell .cep-aviso--erro { color: #b91c1c; }

/* -- Login ---------------------------------------------------------------- */

.app-shell .login-story {
  background-color: #202945;
  border: 0; border-radius: 0; color: #ffffff;
}
/* -- Fundo do painel do login: o mesmo banner do site ----------------------
   Copiado do ma.css do site (.hm-hero-bg), camada por camada, com os valores
   originais — cinco degradês que se alternam por opacidade, e por cima o
   padrão de barras do partial grafismo.html, a 26%.

   Duas diferenças deliberadas em relação ao site:
   - a alternância é animação de CSS, não JS. São cinco camadas fixas num
     laço; um temporizador em JavaScript seria mais uma peça para manter e
     mais um arquivo a carregar numa tela de login.
   - o padrão de barras vira data URI em vez de <pattern> SVG referenciado.
     Continua sem domínio de terceiro, que é a regra do site, e dispensa
     arrastar o partial inteiro para cá.

   O background-color repete o navy por baixo: é a cor que auditor de
   contraste consegue MEDIR — degradê é background-image, e sem ele a
   medição lê "transparente" e sobe até o fundo da página.               */

.app-shell .login-story { position: relative; overflow: hidden; }
.app-shell .login-story > *:not(.portal-hero-bg):not(.portal-hero-rap):not(.portal-malha) {
  position: relative; z-index: 3;
}

.app-shell .portal-hero-bg { position: absolute; inset: 0; z-index: 0; }
.app-shell .portal-hero-bg span {
  position: absolute; inset: 0; opacity: 0;
  animation: portal-hero 40s infinite;
}
.app-shell .portal-hero-bg span:nth-child(1) { background: radial-gradient(1100px 620px at 76% 22%, rgba(3,75,155,.5), transparent 62%), linear-gradient(140deg, #202945, #203864); animation-delay: 0s; }
.app-shell .portal-hero-bg span:nth-child(2) { background: radial-gradient(1000px 640px at 22% 76%, rgba(42,103,188,.48), transparent 60%), linear-gradient(140deg, #202945, #16233a); animation-delay: 8s; }
.app-shell .portal-hero-bg span:nth-child(3) { background: radial-gradient(1200px 560px at 62% 28%, rgba(32,56,100,.85), transparent 64%), linear-gradient(140deg, #182238, #203864); animation-delay: 16s; }
.app-shell .portal-hero-bg span:nth-child(4) { background: radial-gradient(950px 600px at 82% 68%, rgba(3,75,155,.4), transparent 60%), linear-gradient(140deg, #202945, #1a2942); animation-delay: 24s; }
.app-shell .portal-hero-bg span:nth-child(5) { background: radial-gradient(1050px 600px at 40% 30%, rgba(42,103,188,.44), transparent 62%), linear-gradient(140deg, #151f33, #203864); animation-delay: 32s; }

/* Cada camada fica visível a quinta parte do ciclo, com a transição de 1,1s
   do site convertida em proporção do laço. */
@keyframes portal-hero {
  0%    { opacity: 0; }
  2.75% { opacity: 1; }
  20%   { opacity: 1; }
  22.75%{ opacity: 0; }
  100%  { opacity: 0; }
}

.app-shell .portal-malha {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  width: 100%; height: 100%; display: block;
}

.app-shell .portal-hero-rap {
  position: absolute; inset: 0; z-index: 1; opacity: .26; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2226%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%2224%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%232c61ac%22%20opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%232c61ac%22%20opacity%3D%22.32%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2217%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23034b9b%22%20opacity%3D%22.5%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2217%22%20width%3D%2222%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%232c61ac%22%20opacity%3D%22.26%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
}

/* Sem movimento: a primeira camada fica fixa e o crossfade some. O fundo
   continua igual, só não se mexe. */
@media (prefers-reduced-motion: reduce) {
  .app-shell .portal-hero-bg span { animation: none; opacity: 0; }
  .app-shell .portal-hero-bg span:nth-child(1) { opacity: 1; }
}

.app-shell .login-story h2 { color: #ffffff; }
.app-shell .login-story p { color: #cfdcec; }
.app-shell .login-story .eyebrow { color: var(--pt-azul-claro); }
.app-shell .login-story .trust-line { color: var(--pt-azul-claro); }
.app-shell .login-feature-list > div { border-color: #33405f; }
.app-shell .login-feature-list span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--pt-azul-claro); background: transparent; border: 0;
}
.app-shell .login-feature-list strong { color: #ffffff; }
.app-shell .login-feature-list p { color: #cfdcec; }
.app-shell .portal-login-card { background: var(--pt-papel); }
.app-shell .login-help { color: var(--pt-tinta-fraca); border-top: 1px solid var(--pt-linha); padding-top: 18px; }

/* -- Abas do processo -----------------------------------------------------
   Só a TIRA (.tab-buttons) vira a régua de abas. O .detail-tabs é o cartão que
   envolve a tira E os painéis: estilizá-lo como flex empilharia as abas numa
   coluna ao lado do conteúdo. */

.app-shell .detail-tabs, .app-shell .tabs {
  display: block; padding: 0; overflow: visible;
}
.app-shell .tab-buttons {
  display: flex; flex-wrap: wrap; gap: 1px; padding: 0;
  background: var(--pt-linha); border-bottom: 1px solid var(--pt-linha);
}
.app-shell .sticky-tabs {
  background: var(--pt-linha); border-radius: 0; backdrop-filter: none;
  border-bottom: 1px solid var(--pt-linha); top: 72px;
}
.app-shell .portal-panel { padding: 26px 24px; }
.app-shell .portal-tab-btn {
  background: #f7f9fc; color: var(--pt-tinta-media); border: 0; border-radius: 0;
  padding: 14px 20px; font-size: 14px; font-weight: 600; min-height: 44px;
  border-bottom: 3px solid transparent;
}
.app-shell .portal-tab-btn:hover { background: #eef3fa; color: var(--pt-tinta); }
.app-shell .portal-tab-btn.active {
  background: var(--pt-papel); color: var(--pt-tinta); font-weight: 700;
  border-bottom-color: var(--pt-azul);
}

/* -- Caixas de informação do resumo --------------------------------------- */

.app-shell .summary-grid, .app-shell .grid-2, .app-shell .grid-3 {
  gap: 1px; background: var(--pt-linha); border: 1px solid var(--pt-linha);
}
.app-shell .info-box {
  background: var(--pt-papel); border: 0; border-radius: 0; padding: 18px 20px;
}
.app-shell .info-box h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pt-tinta-fraca); margin-bottom: 7px;
}
.app-shell .info-box p { color: var(--pt-tinta); font-size: 15px; line-height: 1.5; }
.app-shell .info-box small { color: var(--pt-tinta-fraca); }

/* O topo do arquivo pinta `p` e `h3` avulsos com as cores do tema escuro
   (#d7e8ff e #8ec5ff). No portal isso nunca apareceu porque todo parágrafo
   estava dentro de algo com regra própria; no lado interno há parágrafos
   soltos — o texto da conversão da comunicação, por exemplo — e eles ficavam
   quase brancos sobre branco. Aqui a base fica certa, e as regras mais
   específicas acima continuam mandando onde existem. */
.app-shell p { color: var(--pt-tinta); }
.app-shell h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pt-tinta-fraca);
}

/* A grade do resumo, quando as células são div avulsa em vez de .info-box.
   É a mesma grade, com a mesma leitura: rótulo pequeno em cima, valor
   embaixo, papel branco e o fio de 1px por fora. */
.app-shell .summary-grid > div {
  background: var(--pt-papel); border: 0; border-radius: 0; padding: 18px 20px;
  color: var(--pt-tinta);
}
.app-shell .summary-grid > div > span {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pt-tinta-fraca);
}
.app-shell .summary-grid > div > strong {
  display: block; font-size: 15px; font-weight: 400; line-height: 1.4;
  color: var(--pt-tinta);
}
.app-shell .highlight-box { background: #f2f7fd; }

/* -- Painel lateral ------------------------------------------------------- */

.app-shell .barrow span { color: var(--pt-tinta-media); }
.app-shell .barrow b { color: var(--pt-tinta); }
.app-shell .barrow div { background: #eef2f7; border-radius: 0; }
.app-shell .barrow i { background: var(--pt-azul); border-radius: 0; }
.app-shell .insight-note {
  background: var(--pt-navy-escuro); border: 0; border-radius: 0; color: #ffffff; padding: 22px 24px;
}
.app-shell .insight-note strong { color: #ffffff; }
.app-shell .insight-note p { color: #cfdcec; }

/* -- Comunicação, documentos, fotos --------------------------------------- */

.app-shell .portal-notice-row, .app-shell .document-compact-row, .app-shell .item {
  background: var(--pt-papel); border: 1px solid var(--pt-linha); border-radius: 0; color: var(--pt-tinta);
}
.app-shell .portal-notice-row:hover, .app-shell .document-compact-row:hover { background: #f7fafd; }
.app-shell .portal-notice-row span, .app-shell .item small { color: var(--pt-tinta-media); }
/* O titulo da linha ficou de fora quando esta parte foi escrita: a lista de
   comunicacoes so aparece para quem tem uma comunicacao aberta, e nenhum
   segurado de teste tinha. Medido assim: 1,08:1, praticamente invisivel. */
.app-shell .portal-notice-row strong { color: var(--pt-tinta); }

/* A barra de envio tambem tinha ficado para tras: continuava um painel escuro
   flutuando no meio de uma tela clara. Vira papel, com o fio por cima e a
   sombra que a mantem legivel sobre o conteudo que ela cobre ao grudar. */
.app-shell .notice-submit-bar {
  background: var(--pt-papel); border: 1px solid var(--pt-linha); border-radius: 0;
  backdrop-filter: none; box-shadow: 0 -6px 24px rgba(32,41,69,.10);
}
.app-shell .notice-submit-bar strong { color: var(--pt-tinta); }
.app-shell .notice-submit-bar span { color: var(--pt-tinta-media); }
.app-shell .upload-dropzone, .app-shell .upload-card {
  background: #f7f9fc; border: 1px dashed #c3d3e6; border-radius: 0; color: var(--pt-tinta-media);
}
.app-shell .upload-rules { color: var(--pt-tinta-fraca); }
.app-shell .selected-file {
  background: var(--pt-papel); border: 1px solid var(--pt-linha); border-radius: 0; color: var(--pt-tinta);
}
.app-shell .selected-file small { color: var(--pt-tinta-fraca); }
.app-shell .photo-card { background: var(--pt-papel); border: 1px solid var(--pt-linha); border-radius: 0; }
.app-shell .photo-caption { color: var(--pt-tinta-media); }
.app-shell .photo-caption small { color: var(--pt-tinta-fraca); }
.app-shell .timeline-item { border-color: var(--pt-linha); color: var(--pt-tinta); }

/* -- Confirmação ---------------------------------------------------------- */

.app-shell .confirmation-card { background: var(--pt-papel); border: 1px solid var(--pt-linha); border-radius: 0; }
.app-shell .confirmation-icon { background: #e6f6f1; color: #00806a; border: 0; }
.app-shell .confirmation-summary { background: #f7f9fc; border: 1px solid var(--pt-linha); border-radius: 0; }
.app-shell .simple-modal-box, .app-shell .modal-note { background: var(--pt-papel); color: var(--pt-tinta); border-radius: 0; }
.app-shell .habitual-doc-item { border-color: var(--pt-linha); color: var(--pt-tinta); }

/* -- Ações de compartilhamento e títulos internos ------------------------- */

.app-shell .copy-btn, .app-shell .email-share-btn, .app-shell .report-btn {
  background: var(--pt-papel); border: 1px solid var(--pt-linha); color: var(--pt-tinta);
  border-radius: 0; box-shadow: none; font-size: 12px; min-height: 38px;
}
.app-shell .copy-btn:hover, .app-shell .email-share-btn:hover { background: #eef3fa; }
/* O verde de marca do WhatsApp (#00a884) com texto branco por cima da 3,03:1
   — medido — e o rotulo aqui tem 12px, que exige 4,5:1. E o mesmo verde do
   site, entao a solucao nao e trocar de cor: e escurecer o tom o minimo
   necessario para o texto sustentar. #00806a marca 4,89:1 e continua sendo
   lido como o verde do WhatsApp. */
.app-shell .whatsapp-share-btn {
  background: #00806a; border: 1px solid #00806a; color: #ffffff;
  border-radius: 0; box-shadow: none; font-size: 12px; min-height: 38px;
}
.app-shell .whatsapp-share-btn:hover { background: #016d5a; border-color: #016d5a; }
.app-shell .portal-panel .card h2,
.app-shell .inner-card h2 { font-size: 18px; }
.app-shell .portal-panel .card h3 { font-size: 15px; }

/* -- Contraste: cores cravadas no tema escuro que não sobrevivem ao claro ---
   Aferido no navegador nas quatro telas. Os valores antigos davam de 1,04:1 a
   2,81:1 sobre branco — o pior deles, o texto do bloco de anexos, era quase
   invisível. O mínimo aqui é 4,5:1 para texto normal. */

.app-shell .detail-head p { color: var(--pt-tinta-media); }
.app-shell .detail-head p b, .app-shell .detail-head p strong { color: var(--pt-tinta); }
.app-shell .field-wrap small { color: var(--pt-tinta-fraca); font-size: 12px; }
.app-shell .upload-dropzone strong,
.app-shell .confirmation-summary strong { color: var(--pt-tinta); }
.app-shell .secure-chip, .app-shell .trust-line { color: var(--pt-tinta-media); }
.app-shell .hero-meta, .app-shell .wide-meta { color: var(--pt-tinta-media); }
.app-shell .subtle { color: var(--pt-tinta); }
.app-shell .upload-dropzone p { color: var(--pt-tinta-media); }
.app-shell .upload-rules { color: var(--pt-tinta-fraca); }
/* O botão de anexar tinha cor cravada com !important, pensada para o fundo azul
   escuro do tema interno: sobre o claro ficava branco no branco (1,06:1). */
.app-shell .upload-select-button {
  background: var(--pt-azul); border-color: var(--pt-azul); color: #ffffff !important;
}
.app-shell .upload-select-button:hover { background: #21539b; border-color: #21539b; }

/* -- Avisos --------------------------------------------------------------- */

.app-shell .toast {
  background: var(--pt-navy-escuro); color: #ffffff; border: 0; border-radius: 0;
  box-shadow: 0 12px 34px rgba(32,41,69,.24);
}
.app-shell .notice { border-radius: 0; }

/* -- Celular: o segurado costuma comunicar sinistro da rua ---------------- */

@media (max-width: 900px) {
  .app-shell .container { padding: 22px 16px 44px; }
  .app-shell .cards.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .page-intro h2 { font-size: 24px; }
  .app-shell .detail-tabs, .app-shell .tabs, .app-shell .tab-buttons { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .app-shell .cards.kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .app-shell .claim-row { padding: 18px 16px; }
  .app-shell .topbar { padding: 0 16px; }
}


/* ==========================================================================
   PARTE IDENTIDADE — o que só existe no lado interno   (01/09/2026)

   O bloco acima vale para os dois lados. Aqui ficam as peças que só a M&A vê:
   as abas do processo, o modal de relatório e o relatório em si.
   ========================================================================== */

/* -- Abas do processo (lado interno) --------------------------------------

   O portal troca de aba com botões e JavaScript; aqui são radio + label, sem
   script. Marcação diferente, mesma leitura na tela: fundo claro, canto vivo
   e a aba ativa marcada por um traço azul embaixo — nada de pílula escura.  */

.internal-shell .tab-buttons label {
  background: #f7f9fc; color: var(--pt-tinta-media);
  border: 0; border-radius: 0; border-bottom: 3px solid transparent;
  padding: 14px 20px; font-size: 14px; font-weight: 600; min-height: 44px;
  display: flex; align-items: center; transition: none;
}
.internal-shell .tab-buttons label:hover {
  background: #eef3fa; color: var(--pt-tinta); transform: none;
  border-color: transparent; border-bottom-color: transparent;
}
.internal-shell .tabs #tab-resumo:checked ~ .tab-buttons label[for=tab-resumo],
.internal-shell .tabs #tab-docs:checked ~ .tab-buttons label[for=tab-docs],
.internal-shell .tabs #tab-movs:checked ~ .tab-buttons label[for=tab-movs],
.internal-shell .tabs #tab-fotos:checked ~ .tab-buttons label[for=tab-fotos] {
  background: var(--pt-papel); color: var(--pt-tinta); font-weight: 700;
  border-color: transparent; border-bottom-color: var(--pt-azul);
}

/* -- Modal do relatório ---------------------------------------------------

   Era um painel #0d1b2e com canto de 22px. Só a moldura muda; o véu preto
   por trás continua, porque é ele que separa o modal da página.            */

.internal-shell .report-modal-box {
  background: var(--pt-papel); border: 1px solid var(--pt-linha);
  border-radius: 0; box-shadow: 0 24px 70px rgba(32,41,69,.28); padding: 24px;
}
.internal-shell .report-modal-title { color: var(--pt-tinta); }
.internal-shell .report-options label {
  background: var(--pt-papel); border: 1px solid var(--pt-linha);
  border-radius: 0; color: var(--pt-tinta);
}
.internal-shell .report-options label:hover { background: #eef3fa; }
.internal-shell .report-preview {
  background: #f7f9fc; border: 1px solid var(--pt-linha); border-radius: 0;
  color: var(--pt-tinta);
}
.internal-shell .report-rendered {
  background: #f7f9fc; border: 1px solid var(--pt-linha); border-radius: 0;
}

/* -- O relatório em si ----------------------------------------------------

   Este é o único pedaço que sai da tela: vira PDF, e-mail e anexo com o logo
   da M&A em cima. Os azuis dele eram #0c2f5c e #1d4f8f, que não são de lugar
   nenhum. Passam a ser os do site. O fundo continua branco de papel — é um
   documento, não uma interface.                                            */

.internal-shell .claim-report,
.internal-shell .report-list-item,
.internal-shell .report-empty,
.internal-shell .claim-report-meta div,
.internal-shell .report-grid div,
.internal-shell .report-text-block { border-radius: 0; }

.internal-shell .claim-report { border-color: var(--pt-linha); box-shadow: none; }
.internal-shell .claim-report-header { border-bottom-color: var(--pt-navy); }
.internal-shell .claim-report-title-block h1,
.internal-shell .claim-report-section h2 { color: var(--pt-navy); }
.internal-shell .claim-report-section h3 { color: var(--pt-azul); }
.internal-shell .claim-report span,
.internal-shell .report-grid span,
.internal-shell .report-text-block span { color: var(--pt-tinta-media); }
.internal-shell .report-table th { background: #eef3fa; color: var(--pt-navy); }

/* -- Tela da comunicação recebida ----------------------------------------- */

.internal-shell .communication-hero-main p { color: var(--pt-tinta-media); }
.internal-shell .communication-email-state span { color: var(--pt-tinta-fraca); }
.internal-shell .communication-email-state strong { color: var(--pt-tinta); }
.internal-shell .communication-email-state small { color: var(--pt-tinta-fraca); }

/* -- Cartão de avisos do dashboard ----------------------------------------

   O aviso continua âmbar, que é a cor de "olhe para isto" no sistema, mas
   sobre papel em vez de sobre o degradê escuro que ninguém mais tem.       */

.internal-shell .notice-alerts-card {
  background: #fffaf2; border: 1px solid #e6d3ae; border-radius: 0;
}
.internal-shell .notice-alerts-card .alert-count { border-color: #e6d3ae; color: #7a5410; }
.internal-shell .notice-alert-row {
  background: var(--pt-papel); border: 1px solid #e6d3ae; border-radius: 0;
  transition: background-color .16s ease;
}
.internal-shell .notice-alert-row:hover { background: #fdf3e3; transform: none; border-color: #d9bd8a; }
.internal-shell .notice-alert-icon {
  background: #fdf3e3; border: 1px solid #e6d3ae; border-radius: 0; color: #7a5410;
}
.internal-shell .notice-alert-copy strong { color: var(--pt-tinta); }
.internal-shell .notice-alert-copy span { color: var(--pt-tinta-media); }
.internal-shell .notice-alert-copy small { color: var(--pt-tinta-fraca); }
.internal-shell .notice-alert-action { color: #7a5410; }