@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* ==========================================================================
   PRIME DEDETIZAÇÃO · Design System v1.0
   Camada de tokens e overrides sobre o Aura (carregar depois de styles.css).
   Fonte: design_system/Prime Design System.dc.html
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root,
[data-aura-theme="light"] {
    /* marca */
    --prime-black: #151512;
    --prime-gold-500: #f5c542;
    --prime-gold-600: #e0ae24;
    --prime-gold-700: #c8901e;
    --prime-gold-800: #9a6d10;
    --prime-gold-50: #fdf3d6;
    --prime-gold-border: #f0dfae;
    --prime-red: #c62a20;
    --prime-red-50: #fce9e7;
    --prime-red-border: #f4cfcb;
    --prime-red-text: #8f1f17;
    --prime-green: #1e8e5a;
    --prime-green-text: #186b45;
    --prime-green-50: #e4f3eb;
    --prime-green-border: #c7e5d5;
    --prime-blue: #2f6fb0;
    --prime-blue-text: #25557f;
    --prime-blue-50: #e9eff6;
    --prime-blue-border: #cfdceb;

    /* superfícies e texto */
    --prime-bg: #f4f2ee;
    --prime-surface: #ffffff;
    --prime-surface-alt: #faf9f6;
    --prime-surface-soft: #fbfaf7;
    --prime-line: #e5e2db;
    --prime-line-soft: #efede7;
    --prime-line-strong: #dcd8cf;
    --prime-fill: #f1efe9;
    --prime-text: #16150f;
    --prime-text-2: #3a3830;
    --prime-text-3: #6b675c;
    --prime-text-4: #8a857a;
    --prime-text-5: #9a9588;

    /* tipografia */
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;

    /* raio */
    --radius-chip: 6px;
    --radius-field: 10px;
    --radius-card: 14px;
    --radius-pill: 99px;

    /* elevação */
    --shadow-1: 0 1px 2px rgba(21, 21, 18, 0.05);
    --shadow-2: 0 4px 14px rgba(21, 21, 18, 0.08);
    --shadow-3: 0 16px 40px rgba(21, 21, 18, 0.16);

    /* mapeamento para os tokens do Aura */
    --background: var(--prime-bg);
    --foreground: var(--prime-text);
    --card: var(--prime-surface);
    --card-foreground: var(--prime-text);
    --popover: var(--prime-surface);
    --popover-foreground: var(--prime-text);
    --primary: var(--prime-gold-500);
    --primary-foreground: var(--prime-black);
    --secondary: var(--prime-fill);
    --secondary-foreground: var(--prime-text);
    --muted: var(--prime-fill);
    --muted-foreground: var(--prime-text-3);
    --accent: var(--prime-gold-50);
    --accent-foreground: var(--prime-gold-800);
    --destructive: var(--prime-red);
    --destructive-foreground: #ffffff;
    --border: var(--prime-line);
    --input: var(--prime-surface);
    --ring: var(--prime-gold-700);
    --color: var(--prime-text-3);
    --text: var(--prime-text);
    --background-card: var(--prime-surface-alt);

    --chart-1: var(--prime-gold-500);
    --chart-2: var(--prime-black);
    --chart-3: #e1ded6;
    --chart-4: var(--prime-red);
    --chart-5: var(--prime-green);

    /* sidebar é sempre preta (base institucional) */
    --sidebar: #151512;
    --sidebar-foreground: #c8c4b8;
    --sidebar-primary: var(--prime-gold-500);
    --sidebar-primary-foreground: var(--prime-black);
    --sidebar-accent: #242420;
    --sidebar-accent-foreground: #f7f5f0;
    --sidebar-border: #2b2b26;
    --sidebar-ring: var(--prime-gold-500);

    /* escala "aura" remapeada para o dourado */
    --aura-50: #fdf3d6;
    --aura-100: #fbe6a6;
    --aura-200: #f9db7e;
    --aura-300: #f7d05e;
    --aura-400: #f5c542;
    --aura-500: #f5c542;
    --aura-600: #e0ae24;
    --aura-700: #c8901e;
    --aura-800: #9a6d10;
    --aura-900: #6e4c08;

    --red: #c62a20;
    --red-50: #fce9e7;
    --red-600: #b3241b;
    --green: #1e8e5a;
    --green-50: #e4f3eb;
    --green-600: #186b45;
    --blue: #2f6fb0;
    --blue-50: #e9eff6;
    --blue-600: #25557f;
    --yellow: #f5c542;

    --shadow-xs: var(--shadow-1);
    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-2);
    --shadow-xl: var(--shadow-3);
    --shadow-2xl: var(--shadow-3);
}

/* tema escuro (app de campo) */
[data-aura-theme="dark"] {
    --prime-bg: #111110;
    --prime-surface: #1a1a17;
    --prime-surface-alt: #1f1f1b;
    --prime-surface-soft: #161614;
    --prime-line: #2b2b26;
    --prime-line-soft: #26241c;
    --prime-line-strong: #3a3629;
    --prime-fill: #26241c;
    --prime-text: #f2efe7;
    --prime-text-2: #e3dfd3;
    --prime-text-3: #9c978a;
    --prime-text-4: #7e7a6e;
    --prime-text-5: #6e6a5e;

    --prime-gold-50: #26241c;
    --prime-gold-border: #3a3629;
    --prime-gold-800: #f5c542;
    --prime-red: #e8675c;
    --prime-red-50: #2a1a18;
    --prime-red-border: #3a2420;
    --prime-red-text: #e8675c;
    --prime-green: #4cc08a;
    --prime-green-text: #4cc08a;
    --prime-green-50: #16281f;
    --prime-green-border: #1f3a2b;
    --prime-blue: #6aa6e0;
    --prime-blue-text: #8bbbe8;
    --prime-blue-50: #17222e;
    --prime-blue-border: #243448;

    --background: #111110;
    --foreground: #f2efe7;
    --card: #1a1a17;
    --card-foreground: #f2efe7;
    --popover: #1a1a17;
    --popover-foreground: #f2efe7;
    --primary: #f5c542;
    --primary-foreground: #151512;
    --secondary: #26241c;
    --secondary-foreground: #f2efe7;
    --muted: #26241c;
    --muted-foreground: #9c978a;
    --accent: #26241c;
    --accent-foreground: #f5c542;
    --destructive: #e8675c;
    --border: #2b2b26;
    --input: #1a1a17;
    --ring: #f5c542;
    --color: #9c978a;
    --text: #f2efe7;
    --background-card: #1f1f1b;

    --sidebar: #0c0c0b;
    --sidebar-border: #2b2b26;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ---------- 2. BASE ---------- */
body {
    font-family: var(--font-body);
    background: var(--prime-bg);
    color: var(--prime-text);
    -webkit-font-smoothing: antialiased;
}

* {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card .card_header h2,
.card-thumb .card_header h2,
.card-thumb .card_header a {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 { font-weight: 800; letter-spacing: -0.02em; }
h2, h3 { font-weight: 700; }

/* números tabulares em dados */
.table td, .table th, .table-sm td, .table-sm th,
.nCount, .badge, [data-numeric] {
    font-variant-numeric: tabular-nums;
}

/* links: nunca dourado como texto sobre fundo claro */
a { color: var(--prime-gold-800); }
a:hover { color: var(--prime-gold-700); text-decoration: underline; }
[data-aura-theme="dark"] a { color: var(--prime-gold-500); }

::selection { background: var(--prime-gold-500); color: var(--prime-black); }

/* ---------- 3. SIDEBAR ---------- */
.sidebar {
    background: var(--sidebar);
    color: var(--sidebar-foreground);
    border-right: 1px solid var(--sidebar-border);
    padding: 0 14px;
}

.sidebar .sidebar_user { border-bottom: 1px solid var(--sidebar-border); padding: 12px 6px 14px; }
.sidebar .sidebar_user .user_thumb img { border: 1px solid var(--sidebar-border); }
.sidebar .sidebar_user .user_thumb img:hover { border-color: var(--prime-gold-500); }
.sidebar .sidebar_user .user_data a { color: #f7f5f0; font-size: 12px; font-weight: 600; }
.sidebar .sidebar_user .user_data a:hover { color: var(--prime-gold-500); text-decoration: none; }
.sidebar .sidebar_user .user_data p { color: #8f8a7c; font-size: 11px; }

.sidebar .sidebar_navbar .navbar_li a {
    height: auto;
    padding: 9px 10px;
    gap: 10px;
    border-radius: 8px;
    color: #c8c4b8;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

.sidebar .sidebar_navbar .navbar_li a i { margin-right: 0; font-size: 14px; }

.sidebar .sidebar_navbar .navbar_li a:hover {
    background: #242420;
    color: #f7f5f0;
    text-decoration: none;
}

.sidebar .sidebar_navbar .navbar_li.active a,
.sidebar .sidebar_navbar .navbar_li.active a:hover,
.sidebar .sidebar_navbar .navbar_li.active-primary a,
.sidebar .sidebar_navbar .navbar_li.active-primary a:hover {
    background: var(--prime-gold-500);
    color: var(--prime-black);
    font-weight: 600;
}

.sidebar .sidebar_navbar .navbar_li.li_title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #6e6a5e;
    padding: 6px 10px;
}

.sidebar .sidebar_navbar .secondary_nav { border-top: 1px solid var(--sidebar-border); padding-top: 8px; }
.sidebar .sidebar_footer { color: #8f8a7c; }
.sidebar .sidebar_footer a { color: var(--prime-gold-500); }

/* ---------- 4. NAVBAR ---------- */
.navbar {
    background: var(--prime-surface);
    border-bottom: 1px solid var(--prime-line-soft);
}

.navbar .container .navbar_button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-field);
    color: var(--prime-text-2);
}

.navbar .container .navbar_button:hover {
    background: var(--prime-fill);
    color: var(--prime-text);
}

.navbar .container .navbar_button .badge,
.navbar .container .navbar_button .nCount {
    background: var(--prime-red);
    color: #fff;
}

.navbar .container .navbar_link:hover { color: var(--prime-gold-800); }
.navbar .container .navbar_user { border-color: var(--prime-line-strong); }

/* ---------- 5. BOTÕES ---------- */
.btn, .btn-sm, .btn-lg, .dropdown .btn-dropdown {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--prime-text);
    background: var(--prime-surface);
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field);
    padding: 10px 16px !important;
}

.btn:hover, .btn-sm:hover, .btn-lg:hover, .dropdown .btn-dropdown:hover {
    background: var(--prime-bg);
    color: var(--prime-text);
}

.btn-sm {
    font-size: 12px;
    border-radius: 8px;
    padding: 7px 12px !important;
}

.btn-lg {
    font-size: 15px;
    font-weight: 700;
    min-height: 52px;
    border-radius: 12px;
}

/* ação primária: dourado (uma por tela) */
.btn-aura-500, .btn-aura-600, .btn-primary, .btn-yellow, .btn-gold {
    color: var(--prime-black) !important;
    background: var(--prime-gold-500) !important;
    border: 1px solid var(--prime-gold-600) !important;
}

.btn-aura-500:hover, .btn-aura-600:hover, .btn-primary:hover, .btn-yellow:hover, .btn-gold:hover {
    background: #ffd65c !important;
    color: var(--prime-black) !important;
}

/* secundário institucional: preto */
.btn-black, .btn-dark, .btn-secondary-500, .btn-secondary-600 {
    color: #f7f5f0 !important;
    background: var(--prime-black) !important;
    border: 1px solid var(--prime-black) !important;
}

.btn-black:hover, .btn-dark:hover, .btn-secondary-500:hover, .btn-secondary-600:hover {
    background: #2a2a24 !important;
    color: #f7f5f0 !important;
}

/* destrutivo: vermelho de apoio */
.btn-red, .btn-red-600, .btn-danger {
    color: var(--prime-red) !important;
    background: var(--prime-red-50) !important;
    border: 1px solid var(--prime-red-border) !important;
}

.btn-red:hover, .btn-red-600:hover, .btn-danger:hover {
    background: #f9dcd9 !important;
    color: var(--prime-red) !important;
}

[data-aura-theme="dark"] .btn-red:hover,
[data-aura-theme="dark"] .btn-red-600:hover,
[data-aura-theme="dark"] .btn-danger:hover { background: #3a2420 !important; }

.btn-green, .btn-green-600 {
    color: var(--prime-green-text) !important;
    background: var(--prime-green-50) !important;
    border: 1px solid var(--prime-green-border) !important;
}

.btn-blue, .btn-blue-600 {
    color: var(--prime-blue-text) !important;
    background: var(--prime-blue-50) !important;
    border: 1px solid var(--prime-blue-border) !important;
}

.btn:disabled, .btn[disabled], .btn-sm:disabled, .btn-lg:disabled {
    color: var(--prime-text-5) !important;
    background: var(--prime-fill) !important;
    border: 1px solid var(--prime-line) !important;
    cursor: not-allowed;
}

/* ---------- 6. CAMPOS ---------- */
input, select, textarea {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--prime-text);
    background: var(--prime-surface);
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field);
}

input::placeholder, textarea::placeholder { color: var(--prime-text-5); }

input:focus, select:focus, textarea:focus,
.select2 .selection .select2-selection:focus {
    border: 1px solid var(--prime-gold-700) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 144, 30, 0.14);
}

.app_form .label .legend,
.app_form_task .label .legend,
.app_form .label-sm .legend,
.app_form_task .label-sm .legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--prime-text-2);
}

.app_form .label .group,
.app_form_task .label .group,
.app_form .label-sm .group,
.app_form_task .label-sm .group {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field);
    font-size: 13px;
}

.app_form .label .group:focus-within,
.app_form_task .label .group:focus-within,
.app_form .label-sm .group:focus-within {
    border-color: var(--prime-gold-700);
    box-shadow: 0 0 0 3px rgba(200, 144, 30, 0.14);
}

.app_form .label .group input,
.app_form .label .group input:focus,
.app_form_task .label .group input:focus {
    border: none !important;
    box-shadow: none;
    background: transparent;
}

.app_form .label .group i { color: var(--prime-text-5); }

/* erro de campo */
.error, .is-invalid, input.error, .group.error {
    border-color: #e0928b !important;
    background: #fffbfb;
}

[data-aura-theme="dark"] .error,
[data-aura-theme="dark"] .is-invalid { background: #2a1a18; }

.select2 .selection .select2-selection,
.select2 .selection .select2-selection--multiple {
    background: var(--prime-surface) !important;
    border: 1px solid var(--prime-line-strong) !important;
    border-radius: var(--radius-field);
    font-size: 13px;
}

.select2 .selection .select2-selection--multiple .select2-selection__choice {
    background: var(--prime-gold-500);
    border: 1px solid var(--prime-gold-600);
    color: var(--prime-black) !important;
}

.select2 .selection .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    color: var(--prime-black);
    border-right: 1px solid var(--prime-gold-600);
}

.select2 .selection .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
    background: var(--prime-gold-600) !important;
}

.select2-container .select2-dropdown {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-2);
}

.select2-container .select2-dropdown .select2-results ul { background: var(--prime-surface); }

.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
    background-color: var(--prime-gold-500);
    color: var(--prime-black);
}

.app_form_search button,
.app_form_search_filter button,
.app_form_note button {
    background: var(--prime-surface);
    border-color: var(--prime-line-strong);
}

/* ---------- 7. CARDS, TABELAS, MODAIS ---------- */
.card, .card-thumb {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
}

.card .card_header h2, .card-thumb .card_header h2 { font-size: 16px; font-weight: 700; }
.card-thumb .card_header a:hover { color: var(--prime-gold-800); }

.table-container {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-bottom: none;
    border-radius: var(--radius-card);
    overflow: hidden !important;
}

.table thead, .table-sm thead { background: var(--prime-surface-alt); }
.table thead tr:hover, .table-sm thead tr:hover { background: var(--prime-surface-alt); }

.table thead th, .table-sm thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--prime-text-4);
}

.table tr, .table-sm tr { border-bottom: 1px solid var(--prime-line-soft) !important; }
.table tbody tr:hover, .table-sm tbody tr:hover { background: var(--prime-surface-alt); }
.table tr td, .table-sm tr td { font-size: 13px; color: var(--prime-text); }
.table tr td a, .table-sm tr td a { color: var(--prime-text); font-weight: 600; }
.table tr td a:hover, .table-sm tr td a:hover { color: var(--prime-gold-800); }

.modal { background: rgba(21, 21, 18, 0.6); }

.modal .modal_container {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: 16px;
    box-shadow: var(--shadow-3);
}

.modal_right {
    background: var(--prime-surface);
    border-left: 1px solid var(--prime-line);
}

.modal_right::-webkit-scrollbar-thumb { background: var(--prime-gold-600); }

.dropdown .dropdown_navbar {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-2);
}

.dropdown .dropdown_navbar .dropdown_navbar_li .dropdown_navbar_link:hover { color: var(--prime-gold-800); }
.dropdown .dropdown_navbar .dropdown_navbar_li .dropdown_navbar_link i { color: var(--prime-gold-700); }

/* ---------- 8. STATUS, ETIQUETAS E AVISOS ---------- */
/* chip de status (pílula): sempre cor + rótulo */
.badge {
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    color: var(--prime-gold-800);
    background: var(--prime-gold-50);
    border: 1px solid var(--prime-gold-border);
}

.badge-red, .badge-danger { color: var(--prime-red); background: var(--prime-red-50); border-color: var(--prime-red-border); }
.badge-green, .badge-success { color: var(--prime-green-text); background: var(--prime-green-50); border-color: var(--prime-green-border); }
.badge-blue, .badge-info { color: var(--prime-blue-text); background: var(--prime-blue-50); border-color: var(--prime-blue-border); }
.badge-gray, .badge-secondary { color: #5d5951; background: var(--prime-fill); border-color: #e1ded6; }

/* etiqueta (retangular, caixa alta) */
.tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--prime-black);
    background: var(--prime-gold-500);
    border-radius: var(--radius-chip);
    padding: 4px 8px;
}

.tag-black { color: #f7f5f0; background: var(--prime-black); }
.tag-outline { color: var(--prime-red); background: transparent; border: 1px solid var(--prime-red); padding: 3px 8px; }

/* toasts */
.toasts .toast {
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-2);
}

.toasts .toast.aura-500, .toasts .toast.aura-600 { border-color: var(--prime-gold-700); }
.toasts .toast.aura-500 .column i, .toasts .toast.aura-600 .column i { color: var(--prime-gold-700); }
.toasts .toast.aura-500::before, .toasts .toast.aura-600::before { background: var(--prime-gold-500); }

.toasts .toast.red, .toasts .toast.red-600 { border-color: var(--prime-red); }
.toasts .toast.red .column i, .toasts .toast.red-600 .column i { color: var(--prime-red); }
.toasts .toast.red::before, .toasts .toast.red-600::before { background: var(--prime-red); }

.toasts .toast.green, .toasts .toast.green-600 { border-color: var(--prime-green); }
.toasts .toast.green .column i, .toasts .toast.green-600 .column i { color: var(--prime-green); }
.toasts .toast.green::before, .toasts .toast.green-600::before { background: var(--prime-green); }

/* cards coloridos do Aura herdam a paleta Prime */
.card-aura-500, .card-aura-600 { color: var(--prime-black) !important; background: var(--prime-gold-500) !important; }
.card-red, .card-red-600 { background: var(--prime-red) !important; }
.card-green, .card-green-600 { background: var(--prime-green) !important; }
.card-blue, .card-blue-600 { background: var(--prime-blue) !important; }

/* ---------- 9. LOGIN ---------- */
.login {
    background: var(--prime-black) url("images/background.webp") center / cover no-repeat;
    color: #f7f5f0;
    justify-content: flex-end;
    padding: 0 clamp(24px, 8vw, 140px);
}

.login .login_box { margin: 0; }

@media (max-width: 768px) {
    .login { justify-content: center; padding: 0; }
    .login .login_box { margin: auto; }
}

.login .login_box {
    background: var(--prime-surface);
    color: var(--prime-text);
    border: 1px solid var(--prime-line);
    border-radius: 16px;
    box-shadow: var(--shadow-3);
}

.login .login_box footer { color: var(--prime-text-4); }
.login .login_box footer a { color: var(--prime-gold-800); }
.login .login_box footer a:hover { color: var(--prime-gold-700) !important; }

/* ---------- 10. CARREGAMENTO ---------- */
/* tela cheia preta, sem card, texto branco e loader.gif do tema */
.ajax_load { background: rgba(21, 21, 18, 0.96); }

.ajax_load .ajax_load_box {
    background: transparent;
    box-shadow: none;
    border: 0;
    color: #fff;
    text-shadow: none;
}

.ajax_load .ajax_load_box .ajax_load_box_loader img {
    display: block;
    margin: 0 auto;
    max-width: 6rem;
}

.ajax_load .ajax_load_box .ajax_load_box_title {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}


/* ---------- 11. APP DO TÉCNICO (alvos de toque ≥ 48px) ---------- */
@media (max-width: 768px) {
    .btn, .btn-lg { min-height: 48px; }
    .sidebar .sidebar_navbar .navbar_li a { min-height: 48px; }
}

/* ==========================================================================
   ÍCONES · FontAwesome (fonts/fontawesome). Uso: <i class="fa-solid fa-NOME"></i>
   ========================================================================== */
i.fa-solid, i.fa-regular, i.fa-brands { line-height: 1; flex-shrink: 0; font-size: 0.9em; }

/* tamanhos do sistema */
.sidebar .sidebar_navbar .navbar_li a i { width: auto; font-size: 14px; }
.navbar .container .navbar_button i { width: auto; font-size: 14px; }
.card .card_header h2 i, .modal_header h2 i { width: auto; font-size: 15px; margin-right: 4px; }
.toasts .toast .column i { width: auto; font-size: 15px; }
.app_form .label .group > span:first-child i { width: auto; font-size: 13px; }
.btn i, .btn-sm i, .btn-lg i { width: auto; font-size: 13px; }



/* Filtro avançado: oculto até clicar em "Filtro Avançado" */
.sales_filter {
    display: none;
}

.sales_filter.open {
    display: block;
}

/* ==========================================================================
   COMPONENTES DO DESIGN SYSTEM (métrica, chip com ponto, avatar, vazio)
   ========================================================================== */

/* título de página */
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-head .eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--prime-gold-700);
}
.page-head h1 { font-size: 26px; margin: 0; }
.page-head p { margin: 0; font-size: 14px; color: var(--prime-text-3); }

/* cartão de métrica */
.metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
}
.metric .metric_label { font-size: 12px; font-weight: 600; color: var(--prime-text-3); }
.metric .metric_value {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--prime-text);
    font-variant-numeric: tabular-nums;
}
.metric .metric_note { font-size: 12px; color: var(--prime-text-4); }
.metric-success .metric_note { color: var(--prime-green-text); font-weight: 600; }
.metric-danger .metric_note { color: var(--prime-red); font-weight: 600; }

/* chip de status com ponto (cor + rótulo) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    color: var(--prime-gold-800);
    background: var(--prime-gold-50);
    border: 1px solid var(--prime-gold-border);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.chip-success { color: var(--prime-green-text); background: var(--prime-green-50); border-color: var(--prime-green-border); }
.chip-success::before { background: var(--prime-green); }
.chip-danger { color: var(--prime-red); background: var(--prime-red-50); border-color: var(--prime-red-border); }
.chip-neutral { color: #5d5951; background: var(--prime-fill); border-color: #e1ded6; }

/* avatar com iniciais */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 99px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--prime-black);
    background: var(--prime-gold-50);
    border: 1px solid var(--prime-gold-border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-cell { display: flex; align-items: center; gap: 12px; }
.user-cell .user-cell_meta { display: flex; flex-direction: column; min-width: 0; }
.user-cell .user-cell_meta small { font-size: 12px; color: var(--prime-text-4); }

/* botão de ícone (ações de tabela) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: var(--prime-text-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}
.icon-btn:hover { background: var(--prime-bg); border-color: var(--prime-line-strong); color: var(--prime-text); text-decoration: none; }
.icon-btn-danger:hover { background: var(--prime-red-50); border-color: var(--prime-red-border); color: var(--prime-red); }
.table-actions { display: flex; justify-content: flex-end; gap: 4px; }

/* estado vazio */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    background: var(--prime-surface);
    border: 1px dashed var(--prime-line-strong);
    border-radius: var(--radius-card);
}
.empty-state .empty-state_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 24px;
    color: var(--prime-gold-800);
    background: var(--prime-gold-50);
    border-radius: 14px;
}
.empty-state[hidden] { display: none; }
.empty-state h3 { margin: 0; font-size: 18px; }
.empty-state p { margin: 0 0 6px; max-width: 360px; font-size: 14px; color: var(--prime-text-3); }

/* busca na lista */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-toolbar form { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; }
.list-toolbar form input { flex: 1; padding: 10px 14px; }
/* Sobrescreve o grupo "colado" do aura.css: input e botão completos, mesma altura */
.list-toolbar form.app_form_search_filter input {
    height: 45px;
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field);
}
.list-toolbar form.app_form_search_filter input::placeholder { color: var(--prime-text-5) !important; }
.list-toolbar form.app_form_search_filter button[type="submit"] {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field) !important;
    background: var(--prime-surface);
}
.list-toolbar form.app_form_search_filter button[type="submit"]:hover { background: var(--prime-surface-alt); }

/* cabeçalho de seção dentro do formulário */
.form-section .card_header h3 { font-size: 15px; }
.form-section .card_header p { margin: 2px 0 0; font-size: 12px; color: var(--prime-text-4); }
.form-actions { display: flex; align-items: center; gap: 10px; }

/* Tabs (tabbar) — Prime Design System: trilho claro, aba ativa branca em destaque */
.tabs nav {
    display: inline-flex;
    max-width: 100%;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    background: var(--prime-bg);
    border: 1px solid var(--prime-line-soft);
    border-radius: 10px;
}

.tabs nav label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--prime-text-3);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.tabs nav label i {
    margin-right: 0;
}

.tabs nav label a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit !important;
}

.tabs nav label:hover {
    color: var(--prime-text);
}

.tabs #tab-1:checked~nav label.tab-1,
.tabs #tab-2:checked~nav label.tab-2,
.tabs #tab-3:checked~nav label.tab-3,
.tabs #tab-4:checked~nav label.tab-4,
.tabs #tab-5:checked~nav label.tab-5,
.tabs #tab-6:checked~nav label.tab-6,
.tabs #tab-7:checked~nav label.tab-7 {
    font-weight: 600;
    color: var(--prime-text);
    background: var(--prime-surface);
    border: 0;
    box-shadow: 0 1px 2px rgba(21, 21, 18, .06);
}

/* ícones e chip extras usados pela tool Condomínios */
.chip-info { color: var(--prime-blue-text); background: var(--prime-blue-50); border-color: var(--prime-blue-border); }
.chip-info::before { background: var(--prime-blue); }

/* submenu da sidebar (ex.: Configurações > Usuários) */
.sidebar .sidebar_navbar .navbar_li.has_submenu > a { position: relative; }
.sidebar .sidebar_navbar .submenu_caret {
    margin-left: auto;
    font-size: 10px !important;
    opacity: 0.6;
    transition: transform 0.2s;
}
.sidebar .sidebar_navbar .has_submenu.open > a .submenu_caret { transform: rotate(180deg); }

.sidebar .sidebar_navbar .navbar_submenu {
    display: none;
    margin: 2px 0 4px 18px;
    padding: 0 0 0 10px;
    list-style: none;
    border-left: 1px solid var(--sidebar-border);
}
.sidebar .sidebar_navbar .has_submenu.open > .navbar_submenu { display: block; }
.sidebar .sidebar_navbar .navbar_submenu .navbar_li a { padding: 7px 10px; font-size: 12.5px; }

/* pai com filho ativo: destaque suave, ouro só no item atual */
.sidebar .sidebar_navbar .has_submenu.open:not(.active) > a { color: #f7f5f0; }
.sidebar .sidebar_navbar .has_submenu.active .navbar_submenu .navbar_li:not(.active) a {
    background: transparent;
    color: #c8c4b8;
    font-weight: 400;
}
.sidebar .sidebar_navbar .has_submenu.active .navbar_submenu .navbar_li:not(.active) a:hover {
    background: #242420;
    color: #f7f5f0;
}

/* Resumo lateral de cadastros (linha rótulo/valor) */
.summary-list { display: flex; flex-direction: column; gap: 12px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary-row_label { font-size: 13px; color: var(--prime-text-3); }
.summary-cover { display: block; width: 100%; border-radius: var(--radius-field); object-fit: cover; border: 1px solid var(--prime-line); }

/* Abas com grid: o .tabs do tema força display:block e anularia o .row (colunas e espaçamento) */
.tabs #tab-1:checked~section .tabs-content.row.content-1,
.tabs #tab-2:checked~section .tabs-content.row.content-2 { display: grid !important; }

/* ==========================================================================
   VENDAS · componentes da tool Sales (Design System: "Detalhe da ordem de serviço")
   ========================================================================== */

/* trilho de etapas: concluída = preto, atual = dourado (ação), pendente = neutro */
.stage-tracker {
    display: flex;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    overflow-x: auto;
}
.stage-tracker .stage {
    position: relative;
    flex: 1 0 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.stage-tracker .stage::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--prime-line);
}
.stage-tracker .stage:first-child::before { display: none; }
.stage-tracker .stage.is-done::before,
.stage-tracker .stage.is-current::before { background: var(--prime-black); }
.stage-tracker .stage_dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--prime-text-5);
    background: var(--prime-fill);
    border: 1px solid var(--prime-line-strong);
}
.stage-tracker .stage.is-done .stage_dot { color: var(--prime-gold-500); background: var(--prime-black); border-color: var(--prime-black); }
.stage-tracker .stage.is-current .stage_dot {
    color: var(--prime-black);
    background: var(--prime-gold-500);
    border-color: var(--prime-gold-600);
    box-shadow: 0 0 0 4px var(--prime-gold-50);
}
.stage-tracker .stage_label { font-size: 12px; font-weight: 600; color: var(--prime-text-4); white-space: nowrap; }
.stage-tracker .stage.is-done .stage_label,
.stage-tracker .stage.is-current .stage_label { color: var(--prime-text); }
.stage-tracker .stage_date { font-size: 11px; color: var(--prime-text-5); font-variant-numeric: tabular-nums; margin-top: -4px; }
.stage-tracker.is-canceled .stage_dot { color: var(--prime-text-5); background: var(--prime-fill); border-color: var(--prime-line-strong); box-shadow: none; }
.stage-tracker.is-canceled .stage::before { background: var(--prime-line); }
.stage-tracker.is-canceled .stage_label { color: var(--prime-text-4); }

/* filtro por etapa na listagem */
.stage-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-filter a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    font-size: 13px; font-weight: 600;
    color: var(--prime-text-2);
    background: var(--prime-surface);
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-field);
    text-decoration: none;
}
.stage-filter a:hover { background: var(--prime-surface-alt); text-decoration: none; color: var(--prime-text); }
.stage-filter a.is-active { color: var(--prime-black); background: var(--prime-gold-50); border-color: var(--prime-gold-border); }
.stage-filter a small { font-size: 12px; color: var(--prime-text-4); font-variant-numeric: tabular-nums; }

/* grade de dados (rótulo em caixa alta + valor) */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.detail-grid .detail { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prime-text-4); }
.detail-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* linha do tempo das etapas */
.timeline { display: flex; flex-direction: column; }
.timeline .timeline_item { display: flex; gap: 12px; }
.timeline .timeline_rail { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.timeline .timeline_dot { width: 10px; height: 10px; margin-top: 4px; border-radius: var(--radius-pill); background: var(--prime-gold-600); }
.timeline .timeline_dot.is-off { background: var(--prime-line-strong); }
.timeline .timeline_line { flex: 1; width: 1px; background: var(--prime-line); }
.timeline .timeline_item:last-child .timeline_line { display: none; }
.timeline .timeline_body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; }
.timeline .timeline_body strong { font-size: 13px; }
.timeline .timeline_body span { font-size: 12px; color: var(--prime-text-3); }

/* cartão de cobrança (preto, como no Design System) */
.billing-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    color: #f7f5f0;
    background: var(--prime-black);
    border-radius: 12px;
}
.billing-card .billing-card_title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9c978a; }
.billing-card .billing-card_row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: #c8c4b8; }
.billing-card .billing-card_row strong { color: #f7f5f0; font-weight: 500; font-variant-numeric: tabular-nums; }
.billing-card .billing-card_total {
    padding-top: 10px; border-top: 1px solid #2b2b26;
    font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--prime-gold-500);
}

/* itens da venda: campos compactos dentro da tabela */
.items-table td, .items-table th { vertical-align: middle; }
/* larguras fixas: Total e o botão de remover sempre cabem dentro do cartão */
.items-table { table-layout: fixed; width: 100%; }
.table.items-table tr td input, .table.items-table tr td select {
    width: 100%; min-width: 0; padding: 7px 10px; font-size: 13px;
    background: var(--prime-surface); border: 1px solid var(--prime-line-strong); border-radius: var(--radius-field);
}
.table.items-table tr td input:focus, .table.items-table tr td select:focus { outline: none; border-color: var(--prime-gold-700); }
.items-table .col-num { width: 118px; }
.items-table .col-discount { width: 156px; }
.items-table .col-total { width: 124px; white-space: nowrap; }
.items-table .col-action { width: 44px; }

/* menu de ações da linha (posição fixa: o .table-container corta overflow) */
.row-menu { display: inline-block; }
.row-menu_list {
    position: fixed;
    z-index: 1000;
    min-width: 200px;
    padding: 6px;
    background: var(--prime-surface);
    border: 1px solid var(--prime-line);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(21, 21, 18, 0.14);
}
.row-menu_list[hidden] { display: none; }
.row-menu_item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: var(--prime-black);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
.row-menu_item i { width: 16px; text-align: center; color: var(--prime-text-4); }
.row-menu_item:hover { background: var(--prime-surface-alt); }
.row-menu_item.is-danger, .row-menu_item.is-danger i { color: var(--prime-red); }
.row-menu_item.is-danger:hover { background: var(--prime-red-50); }
.row-menu_sep { height: 1px; margin: 6px 4px; background: var(--prime-line-soft); }
.row-menu_sep:first-child { display: none; }
[data-aura-theme="dark"] .row-menu_list { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.table.items-table tr td { white-space: nowrap; }
.table.items-table tr td .item-title { white-space: normal; }
.table.items-table tr td input[type=number] { -moz-appearance: textfield; appearance: textfield; padding-left: 8px; padding-right: 8px; }
.table.items-table tr td input[type=number]::-webkit-outer-spin-button,
.table.items-table tr td input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.items-table .discount-cell { display: flex; gap: 6px; }
.table.items-table tr td .discount-cell select { width: 58px; flex: none; padding-left: 6px; padding-right: 6px; }
.items-table .item-title { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.items-table .item-title small { font-size: 12px; color: var(--prime-text-4); }

/* aviso de bloqueio de edição */
.notice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    font-size: 13px; color: var(--prime-blue-text);
    background: var(--prime-blue-50);
    border: 1px solid var(--prime-blue-border);
    border-radius: var(--radius-field);
}
.notice.notice-danger { color: var(--prime-red-text); background: var(--prime-red-50); border-color: var(--prime-red-border); }

/* ==========================================================================
   Documentos: editor, variáveis e gaveta de configuração da página
   ========================================================================== */

/* variáveis clicáveis do modelo */
.variable-group { display: flex; flex-direction: column; gap: 8px; }
.variable-list { display: flex; flex-wrap: wrap; gap: 6px; }
.variable-chip { cursor: pointer; font-family: var(--font-body); font-weight: 500; }
.variable-chip::before { display: none; }
.variable-chip:hover { color: var(--prime-gold-800); background: var(--prime-gold-50); border-color: var(--prime-gold-border); }

/* gaveta lateral */
.drawer { background: var(--prime-bg); border-left: 1px solid var(--prime-line); box-shadow: var(--shadow-3); padding: 24px; }
.drawer .drawer_header { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.drawer .drawer_header h2 { margin: 0; font-size: 18px; }
.drawer .drawer_header h2 i { font-size: 15px; margin-right: 4px; color: var(--prime-gold-700); }

/* moldura do editor de texto no tom do sistema */
.tox.tox-tinymce { border: 1px solid var(--prime-line-strong); border-radius: var(--radius-field); box-shadow: none; }
.tox .tox-toolbar-overlord, .tox .tox-editor-header { background: var(--prime-surface-alt); }

/* indicador do salvamento automático da venda */
.autosave-status { font-size: 12px; color: var(--prime-text-4); }
.autosave-status.is-error { color: var(--prime-red); font-weight: 600; }

/* modais: cabeçalho e corpo no padrão do sistema; avisos sempre acima do modal */
.toasts { z-index: 3000; }
.modal .modal_container .modal_header {
    padding: 18px 22px; border-bottom: 1px solid var(--prime-line); background: var(--prime-surface);
    border-radius: 16px 16px 0 0;
}
.modal .modal_container .modal_header h2 { margin: 0; font-size: 20px; }
.modal .modal_container .modal_body { padding: 20px 22px 22px; background: var(--prime-bg); border-radius: 0 0 16px 16px; }
.modal .modal_container .modal_body .card { box-shadow: none; }

/* ações secundárias da etapa (voltar e cancelar) lado a lado */
.stage-actions { display: flex; gap: 8px; }
.stage-actions .btn { flex: 1; justify-content: center; }
#cancel-form[hidden] { display: none; }

/* cronograma de visitas */
.visit-generator { padding: 14px; background: var(--prime-surface-alt); border: 1px solid var(--prime-line); border-radius: var(--radius-field); }
#vg-weekday-wrap[hidden] { display: none; }
.items-table .col-date { width: 154px; }
.items-table .col-day { width: 44px; color: var(--prime-text-3); }
.items-table .col-time { width: 104px; }
.items-table .col-status { width: 124px; }
/* campos compactos para as 6 colunas caberem na largura do cartão */
.table.visits-table tr td, .table.visits-table tr th { padding-left: 6px; padding-right: 6px; }
.table.visits-table tr td:first-child, .table.visits-table tr th:first-child { padding-left: 14px; }
.table.visits-table tr td input, .table.visits-table tr td select { padding-left: 8px; padding-right: 6px; font-size: 12px; }
.table.visits-table tr td input[type=date], .table.visits-table tr td input[type=time] { padding-right: 4px; }
.visits-table .visit-month td {
    padding: 8px 14px; background: var(--prime-surface-alt);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prime-text-4);
}

/* Atividades: selo dos registros automáticos das tools (ex.: histórico da venda) */
.activity-type-badge.badge-system {
    background: #e5e7eb;
    color: #374151;
}

/* ---------- Seleção: radio em cartão (.choice) e checkbox (.check) ---------- */
.choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--prime-surface);
    border: 1px solid var(--prime-line-strong);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.choice:hover { border-color: var(--prime-gold-700); }

.choice_input,
.check_input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice_mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--prime-surface);
    border: 1.5px solid var(--prime-line-strong);
    border-radius: var(--radius-pill);
    transition: border-color .15s ease, background-color .15s ease;
}

.choice_mark::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--prime-black);
    border-radius: var(--radius-pill);
    transform: scale(0);
    transition: transform .15s ease;
}

.choice_body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.choice_body strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--prime-text);
}

.choice_body strong i { color: var(--prime-gold-700); }

.choice_body small {
    font-size: 12px;
    line-height: 1.45;
    color: var(--prime-text-3);
}

.choice:has(.choice_input:checked) {
    background: var(--prime-gold-50);
    border-color: var(--prime-gold-500);
}

.choice_input:checked ~ .choice_mark {
    background: var(--prime-gold-500);
    border-color: var(--prime-gold-700);
}

.choice_input:checked ~ .choice_mark::after { transform: scale(1); }

.choice:has(.choice_input:focus-visible) {
    border-color: var(--prime-gold-700);
    box-shadow: 0 0 0 3px rgba(200, 144, 30, 0.14);
}

.choice:has(.choice_input:disabled) {
    cursor: default;
    opacity: .65;
}

.choice:has(.choice_input:disabled):hover { border-color: var(--prime-line-strong); }
.choice:has(.choice_input:disabled:checked):hover { border-color: var(--prime-gold-500); }

.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    font-size: 13px;
    color: var(--prime-text-2);
    cursor: pointer;
}

.check_box {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: var(--prime-surface);
    border: 1.5px solid var(--prime-line-strong);
    border-radius: 5px;
    transition: border-color .15s ease, background-color .15s ease;
}

.check_box::after {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid var(--prime-black);
    border-bottom: 2px solid var(--prime-black);
    transform: rotate(-45deg) scale(0);
    transition: transform .15s ease;
}

.check:hover .check_box { border-color: var(--prime-gold-700); }

.check_input:checked ~ .check_box {
    background: var(--prime-gold-500);
    border-color: var(--prime-gold-700);
}

.check_input:checked ~ .check_box::after { transform: rotate(-45deg) scale(1); }

.check_input:focus-visible ~ .check_box {
    border-color: var(--prime-gold-700);
    box-shadow: 0 0 0 3px rgba(200, 144, 30, 0.14);
}

.check:has(.check_input:disabled) { cursor: default; opacity: .65; }

@media (max-width: 640px) {
    .choice-group { grid-template-columns: 1fr; }
}