/* ============================================================================ Portal Correios — folha de estilo principal Temas: "Despacho noturno" (dark) e "Papel oficio" (light). Troca via atributo data-theme no , usando CSS Variables. ========================================================================= */ /* ---------- Tema ESCURO (padrao) ---------- */ :root, :root[data-theme="dark"] { --bg: #081726; --bg-grad-1: #0a1f33; --bg-grad-2: #061320; --surface: #0f2942; --surface-2: #12314f; --surface-3: #0a2138; --line: #1d4368; --line-soft: #16314c; --text: #e8f0f8; --text-soft: #9bb4cc; --text-dim: #6c89a6; --blue: #1d8bff; --blue-deep: #0a66b0; --yellow: #ffd200; --yellow-deep: #e6b800; --green: #2fd47a; --red: #ff5a6a; --header-bg: rgba(8, 23, 38, .82); --sidebar-grad-1: rgba(15,41,66,.92); --sidebar-grad-2: rgba(8,23,38,.96); --input-bg: #0a2138; --shadow: 0 24px 60px rgba(0, 0, 0, .45); --glow: rgba(29, 139, 255, .2); --body-bg: radial-gradient(1200px 600px at 100% -10%, rgba(29, 139, 255, .12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(255, 210, 0, .07), transparent 55%), linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2)); } /* ---------- Tema CLARO ---------- */ :root[data-theme="light"] { --bg: #eef3f8; --bg-grad-1: #f4f8fc; --bg-grad-2: #e6eef6; --surface: #ffffff; --surface-2: #f7fafd; --surface-3: #eef4fa; --line: #d2e0ee; --line-soft: #e4edf6; --text: #11283d; --text-soft: #46627d; --text-dim: #7c93aa; --blue: #0a6fd6; --blue-deep: #0857a8; --yellow: #d99e00; --yellow-deep: #b98700; --green: #1a9c5b; --red: #d63848; --header-bg: rgba(255, 255, 255, .85); --sidebar-grad-1: #ffffff; --sidebar-grad-2: #f4f8fc; --input-bg: #ffffff; --shadow: 0 20px 48px rgba(20, 60, 110, .12); --glow: rgba(10, 111, 214, .16); --body-bg: radial-gradient(1200px 600px at 100% -10%, rgba(10, 111, 214, .08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(217, 158, 0, .06), transparent 55%), linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2)); } :root { --radius: 14px; --radius-sm: 9px; --font-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif; --font-body: "Public Sans", system-ui, -apple-system, sans-serif; --sidebar-w: 256px; --header-h: 64px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--body-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; line-height: 1.55; transition: background-color .25s ease, color .25s ease; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; } /* ---- Layout centrado (auth / install / errors) ---- */ .center-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; } .brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 26px; } .brand .logo { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(29,139,255,.4); position: relative; overflow: hidden; flex: none; } .brand .logo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,210,0,.25) 8px 12px); } .brand .logo span { font-size: 24px; z-index: 1; } .brand b { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; } .brand i { color: var(--yellow); font-style: normal; } .card { width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 30px; } .card.wide { max-width: 680px; } .card h1 { font-size: 22px; margin-bottom: 4px; } .card .sub { color: var(--text-soft); font-size: 14px; margin-bottom: 24px; } /* ---- Formularios ---- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 6px; font-weight: 600; } .input, select.input { width: 100%; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .input:focus, select.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--glow); } .input::placeholder { color: var(--text-dim); } .field-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-soft); cursor: pointer; } .checkbox input { width: 16px; height: 16px; accent-color: var(--blue); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .08s, filter .15s, background .15s; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; } .btn-primary.block, .btn-block { width: 100%; } .btn-primary:hover { filter: brightness(1.08); text-decoration: none; } .btn-yellow { background: linear-gradient(135deg, var(--yellow), var(--yellow-deep)); color: #2a2000; } .btn-yellow:hover { filter: brightness(1.05); text-decoration: none; } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text-soft); } .btn-ghost:hover { border-color: var(--blue); color: var(--text); text-decoration: none; } .btn-danger { background: transparent; border-color: rgba(214,56,72,.4); color: var(--red); } .btn-danger:hover { background: rgba(214,56,72,.12); text-decoration: none; } .btn-sm { padding: 7px 12px; font-size: 13px; } /* ---- Alertas ---- */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; border: 1px solid; } .alert-error { background: rgba(214,56,72,.10); border-color: rgba(214,56,72,.35); color: var(--red); } .alert-success { background: rgba(26,156,91,.10); border-color: rgba(26,156,91,.35); color: var(--green); } .alert-info { background: rgba(10,111,214,.10); border-color: rgba(10,111,214,.30); color: var(--blue); } /* ======================= APP SHELL ======================= */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: linear-gradient(180deg, var(--sidebar-grad-1), var(--sidebar-grad-2)); border-right: 1px solid var(--line-soft); padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease; } .sidebar .brand { justify-content: flex-start; margin: 4px 6px 22px; } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; } .nav-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 16px 10px 6px; } .nav a, .nav-group > button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; cursor: pointer; background: transparent; border: none; font-family: inherit; text-align: left; } .nav a:hover, .nav-group > button:hover { background: var(--glow); color: var(--text); text-decoration: none; } .nav a.active { background: linear-gradient(135deg, var(--glow), transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .nav .ico { width: 18px; height: 18px; text-align: center; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); } .nav .ico svg { width: 18px; height: 18px; } .nav a.active .ico { color: var(--blue); } .nav-group .chev svg { width: 13px; height: 13px; } .nav-group > button { justify-content: space-between; } .nav-group .grp-left { display: flex; align-items: center; gap: 11px; } .nav-group .chev { transition: transform .2s ease; font-size: 11px; color: var(--text-dim); } .nav-group.open .chev { transform: rotate(90deg); } .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; } .nav-group.open .nav-sub { grid-template-rows: 1fr; } .nav-sub > div { overflow: hidden; } .nav-sub a { font-size: 13.5px; padding: 8px 12px 8px 41px; font-weight: 500; color: var(--text-soft); } .nav-sub a.active { background: var(--glow); box-shadow: none; color: var(--text); } .sidebar-foot { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 6px; } .user-chip .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), var(--yellow-deep)); color: #2a2000; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); flex: none; } .user-chip .meta { min-width: 0; } .user-chip .meta b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-chip .meta small { color: var(--text-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .content { display: flex; flex-direction: column; min-width: 0; } .header { position: sticky; top: 0; z-index: 30; height: var(--header-h); display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--header-bg); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); } .header .menu-btn { display: none; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font-size: 18px; align-items: center; justify-content: center; } .header .header-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .header .header-title small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--text-dim); letter-spacing: 0; } .header .spacer { flex: 1; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; font-size: 17px; } .icon-btn:hover { color: var(--text); border-color: var(--blue); background: var(--glow); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; } :root[data-theme="light"] .theme-toggle .sun { display: inline; } :root[data-theme="light"] .theme-toggle .moon { display: none; } .main { padding: 28px 32px; overflow-x: hidden; flex: 1; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-head h1 { font-size: 26px; } .page-head .sub { color: var(--text-soft); font-size: 14px; margin-top: 2px; } .footer { padding: 18px 32px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 35; opacity: 0; transition: opacity .2s; } .drawer-overlay.show { display: block; opacity: 1; } /* ---- Stat cards ---- */ .grid { display: grid; gap: 18px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .stat { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; } .stat::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), transparent); } .stat .label { color: var(--text-soft); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat .value { font-family: var(--font-display); font-size: 34px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; } .stat.accent::before { background: linear-gradient(90deg, var(--yellow), transparent); } .stat.accent .value { color: var(--yellow); } .stat.green::before { background: linear-gradient(90deg, var(--green), transparent); } .stat.green .value { color: var(--green); } /* ---- Panel + tabela ---- */ .panel { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; margin-top: 18px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .panel h2 { font-size: 18px; } .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 13px 14px; font-size: 14px; white-space: nowrap; } th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; border-bottom: 1px solid var(--line); } td { border-bottom: 1px solid var(--line-soft); } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--glow); } .badge { display: inline-flex; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; } .badge-on { background: rgba(26,156,91,.15); color: var(--green); } .badge-off { background: rgba(214,56,72,.15); color: var(--red); } .badge-blue { background: var(--glow); color: var(--blue); } .badge-warn { background: rgba(217,158,0,.16); color: var(--yellow-deep); } .row-actions { display: flex; gap: 8px; } .kv { display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; font-size: 14.5px; } .kv dt { color: var(--text-soft); font-weight: 600; } .kv dd { margin: 0; } .muted { color: var(--text-dim); } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; } /* ---- Toolbar busca/filtro ---- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .search-box { position: relative; flex: 1; min-width: 200px; } .search-box input { width: 100%; padding: 10px 12px 10px 38px; background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; } .search-box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--glow); } .search-box .si { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); } .tabs { display: inline-flex; gap: 2px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 3px; } .tabs a { padding: 7px 14px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.active { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; } .pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-soft); } .pagination a:hover { border-color: var(--blue); color: var(--text); text-decoration: none; } .pagination .current { background: var(--blue); border-color: var(--blue); color: #fff; } .pagination .disabled { opacity: .4; pointer-events: none; } .empty-state { text-align: center; padding: 48px 20px; color: var(--text-dim); } .empty-state .ico { font-size: 40px; display: block; margin-bottom: 10px; opacity: .7; } /* ---- Loading / skeleton ---- */ .spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--line-soft) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 6px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* ---- Toasts ---- */ .toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .toast { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 13px 16px; font-size: 14px; color: var(--text); animation: toast-in .25s ease; display: flex; gap: 10px; align-items: flex-start; } .toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } .toast.info { border-left-color: var(--blue); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---- Installer steps ---- */ .steps { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; } .steps .step { flex: 1; min-width: 90px; text-align: center; font-size: 12px; color: var(--text-dim); padding-bottom: 8px; border-bottom: 2px solid var(--line-soft); font-weight: 600; } .steps .step.done { color: var(--green); border-color: var(--green); } .steps .step.current { color: var(--yellow); border-color: var(--yellow); } .check-list { list-style: none; padding: 0; margin: 0 0 22px; } .check-list li { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; } .check-list .ok { color: var(--green); font-weight: 700; } .check-list .no { color: var(--red); font-weight: 700; } .check-list small { color: var(--text-dim); display: block; } .terminal { background: #04101c; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; font-family: ui-monospace, monospace; font-size: 12.5px; color: #9fe0b4; white-space: pre-wrap; max-height: 240px; overflow: auto; margin-bottom: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .err-code { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 700; color: var(--yellow); margin-bottom: 8px; } /* ======================= RESPONSIVO ======================= */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; transform: translateX(-100%); box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .header .menu-btn { display: inline-flex; } .main { padding: 20px 16px; } .header { padding: 0 16px; } .footer { padding: 16px; } .grid-3 { grid-template-columns: 1fr; } .grid-2, .form-row { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 4px 0; } .kv dt { margin-top: 8px; } .page-head h1 { font-size: 22px; } .header .header-title small { display: none; } } @media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr 1fr; } .toolbar { flex-direction: column; align-items: stretch; } .tabs { width: 100%; justify-content: space-between; } .tabs a { flex: 1; text-align: center; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- Modais (dashboard) ---- */ .crx-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; } .crx-modal[hidden] { display: none; } .crx-modal-box { width: 100%; max-width: 520px; max-height: 86vh; overflow: auto; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); animation: toast-in .2s ease; } .crx-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--surface); } .crx-modal-head h3 { font-size: 17px; } .crx-modal-body { padding: 20px 22px; } .kv-line { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; } .kv-line dt { color: var(--text-soft); font-weight: 600; margin: 0; } .kv-line dd { margin: 0; } .timeline { display: flex; flex-direction: column; gap: 0; } .tl-item { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--line); } .tl-item:last-child { border-left-color: transparent; padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--glow); } .tl-item b { display: block; font-size: 14px; } .tl-item small { font-size: 12.5px; } /* ---- Overlay de carregamento global ---- */ .loading-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: rgba(4, 12, 22, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } :root[data-theme="light"] .loading-overlay { background: rgba(20, 60, 110, .35); } .loading-overlay[hidden] { display: none; } .loading-box { display: flex; flex-direction: column; align-items: center; gap: 14px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 34px; } .loading-box p { color: var(--text-soft); font-size: 14px; margin: 0; } .spinner-lg { width: 34px; height: 34px; border-width: 3px; } /* ---- Rastreamento: timeline rica + comprovante de entrega ---- */ .trk-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .trk-box { background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 14px; } .trk-box label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 3px; } .trk-box span { font-weight: 600; font-size: 14px; } .trk-delivered { background: rgba(47,212,122,.12); border: 1px solid rgba(47,212,122,.4); color: var(--green); border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; } .trk-ar-toggle { width: 100%; text-align: left; background: transparent; border: 1px dashed rgba(47,212,122,.5); color: var(--green); padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .trk-ar-toggle:hover { background: rgba(47,212,122,.08); } .trk-ar-wrap { margin-bottom: 14px; } .trk-ar-wrap img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .trk-ar-loading { color: var(--text-dim); font-size: 13px; padding: 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); } .trk-tl { display: flex; flex-direction: column; } .trk-ev { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding-bottom: 16px; position: relative; } .trk-ev .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px; z-index: 1; } .trk-ev.first .dot { border-color: var(--blue); background: var(--glow); } .trk-ev.bde .dot { border-color: var(--green); background: rgba(47,212,122,.15); } .trk-ev::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line-soft); } .trk-ev:last-child::before { display: none; } .trk-ev .desc { font-weight: 600; font-size: 14px; } .trk-ev.bde .desc { color: var(--green); } .trk-ev .meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .trk-ev .when { font-size: 12px; color: var(--text-dim); white-space: nowrap; text-align: right; } .btn-ar-dl { display: inline-block; margin-top: 8px; } /* ---- Modal de ação (confirmação + status animado) ---- */ .action-ico { width: 64px; height: 64px; margin: 0 auto 16px; } .action-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 6px; } .action-text { color: var(--text-soft); font-size: 14px; margin-bottom: 20px; } .action-btns { display: flex; gap: 10px; justify-content: center; } /* Check verde animado (SVG stroke draw) */ .check-circle { stroke: var(--green); stroke-width: 3; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: check-circle .5s cubic-bezier(.65,0,.45,1) forwards; } .check-mark { stroke: var(--green); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: check-mark .35s cubic-bezier(.65,0,.45,1) .5s forwards; } @keyframes check-circle { to { stroke-dashoffset: 0; } } @keyframes check-mark { to { stroke-dashoffset: 0; } } /* X vermelho animado */ .x-circle { stroke: var(--red); stroke-width: 3; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: check-circle .5s cubic-bezier(.65,0,.45,1) forwards; } .x-line { stroke: var(--red); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: check-mark .3s ease .5s forwards; } /* ---- Escolha em cartão (instalador) ---- */ .install-choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; } .install-choice:hover { border-color: var(--blue); background: var(--glow); } .install-choice input { margin-top: 3px; accent-color: var(--blue); } .install-choice b { display: block; font-size: 14.5px; } .install-choice small { color: var(--text-dim); font-size: 12.5px; display: block; margin-top: 3px; }