:root {
    color-scheme: light;
    --cor-fundo: #f4f5f7;
    --cor-plano: #eceef2;
    --cor-texto: #1f2430;
    --cor-texto-sec: #4b5261;
    --cor-muted: #6b7280;
    --cor-borda: #e2e4e9;
    --cor-primaria: #2563eb;
    --cor-primaria-escura: #1d4ed8;
    --cor-primaria-fraca: #eaf0fe;
    --cor-perigo: #dc2626;
    --cor-sucesso: #16a34a;
    --cor-card: #ffffff;
    --cor-campo: #ffffff;
    --cor-sidebar: #14181f;
    --cor-sidebar-texto: #9aa2b1;
    --cor-sidebar-texto-ativo: #ffffff;
    --cor-sidebar-hover: rgba(255,255,255,.06);
    --raio: 8px;
    --sombra-card: 0 1px 2px rgba(16,24,40,.04);
    /* Paleta categórica dos gráficos do dashboard (validada — ver skill de dataviz) —
       mesmos slots 1-4 (azul/laranja/água/amarelo) em todo o app, com os tons
       específicos de cada modo pra continuar passando no contraste/CVD nos dois. */
    --chart-cor-1: #2a78d6;
    --chart-cor-2: #eb6834;
    --chart-cor-3: #1baf7a;
    --chart-cor-4: #eda100;
}
/* Tema escuro: aplicado automaticamente se o SO estiver em modo escuro (e o
   usuário não tiver escolhido "claro" explicitamente no botão da topbar), ou
   forçado via [data-theme] quando o usuário escolhe no botão — o toggle
   sempre vence os dois lados (claro força claro mesmo com SO escuro, e vice-versa). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --cor-fundo: #0d1117;
        --cor-plano: #090c10;
        --cor-texto: #e6e8ec;
        --cor-texto-sec: #aab0bd;
        --cor-muted: #838a99;
        --cor-borda: #262c37;
        --cor-primaria: #3b82f6;
        --cor-primaria-escura: #2563eb;
        --cor-primaria-fraca: #16233d;
        --cor-perigo: #f87171;
        --cor-sucesso: #4ade80;
        --cor-card: #151a22;
        --cor-campo: #10141a;
        --cor-sidebar: #0a0d12;
        --cor-sidebar-texto: #8890a0;
        --cor-sidebar-texto-ativo: #ffffff;
        --cor-sidebar-hover: rgba(255,255,255,.06);
        --chart-cor-1: #3987e5;
        --chart-cor-2: #d95926;
        --chart-cor-3: #199e70;
        --chart-cor-4: #c98500;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --cor-fundo: #0d1117;
    --cor-plano: #090c10;
    --cor-texto: #e6e8ec;
    --cor-texto-sec: #aab0bd;
    --cor-muted: #838a99;
    --cor-borda: #262c37;
    --cor-primaria: #3b82f6;
    --cor-primaria-escura: #2563eb;
    --cor-primaria-fraca: #16233d;
    --cor-perigo: #f87171;
    --cor-sucesso: #4ade80;
    --cor-card: #151a22;
    --cor-campo: #10141a;
    --cor-sidebar: #0a0d12;
    --cor-sidebar-texto: #8890a0;
    --cor-sidebar-texto-ativo: #ffffff;
    --cor-sidebar-hover: rgba(255,255,255,.06);
    --chart-cor-1: #3987e5;
    --chart-cor-2: #d95926;
    --chart-cor-3: #199e70;
    --chart-cor-4: #c98500;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.5;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

.btn-link { background: none; border: none; cursor: pointer; font: inherit; color: var(--cor-primaria); }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-header h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }

.card {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.stats-row { display: flex; gap: 16px; margin-bottom: 20px; }
.stat-card {
    background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    padding: 16px 24px; display: flex; flex-direction: column;
}
.stat-value { font-size: 2rem; font-weight: 700; }
.stat-label { color: var(--cor-muted); font-size: 0.9rem; }

.list-simple { list-style: none; margin: 0; padding: 0; }
.list-simple li { padding: 8px 0; border-bottom: 1px solid var(--cor-borda); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-simple li:last-child { border-bottom: none; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin: 14px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=file], select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid var(--cor-borda); border-radius: 6px; font: inherit; background: var(--cor-campo); color: var(--cor-texto);
}
textarea { resize: vertical; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .form-row, .form-row-4 { grid-template-columns: 1fr; } }

.form-actions { margin-top: 20px; display: flex; gap: 10px; }

.btn {
    display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--cor-borda);
    background: var(--cor-card); color: var(--cor-texto); cursor: pointer; font: inherit; text-decoration: none;
}
.btn:hover { background: var(--cor-plano); text-decoration: none; }
.btn-primary { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.btn-primary:hover { background: var(--cor-primaria-escura); }
.btn-block { width: 100%; }
.btn-danger { color: var(--cor-perigo); }
.btn-sm { padding: 5px 10px; font-size: .82rem; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--cor-borda); font-size: 0.92rem; }
.table th { color: var(--cor-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; }
.acoes { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.acoes form { display: inline; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; background: #e5e7eb; color: #374151; }
.badge-planejado { background: #e0e7ff; color: #3730a3; }
.badge-em_andamento { background: #fef3c7; color: #92400e; }
.badge-concluido { background: #dcfce7; color: #166534; }
.badge-cancelado { background: #fee2e2; color: #991b1b; }
.badge-admin { background: #ede9fe; color: #5b21b6; }
.badge-usuario { background: #e0e7ff; color: #3730a3; }
.badge-ativo { background: #dcfce7; color: #166534; }
.badge-bloqueado { background: #fee2e2; color: #991b1b; }

.muted { color: var(--cor-muted); }
.small { font-size: 0.82rem; }

.form-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; }
.checkbox-linha { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.checkbox-linha input { width: auto; }

.detalhes-senha { display: inline-block; position: relative; }
.detalhes-senha summary { cursor: pointer; color: var(--cor-primaria); list-style: none; }
.detalhes-senha summary::-webkit-details-marker { display: none; }
.form-senha-inline {
    position: absolute; top: 100%; left: 0; z-index: 5; margin-top: 6px; padding: 10px;
    display: flex; gap: 6px; background: var(--cor-card); border: 1px solid var(--cor-borda);
    border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); white-space: nowrap;
}
.form-senha-inline input { width: 160px; }

.perfil-foto-atual { display: flex; justify-content: center; margin-bottom: 16px; }
.perfil-avatar-grande { width: 96px; height: 96px; font-size: 2rem; }

.flash { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash-sucesso { background: #dcfce7; color: #166534; }
.flash-erro { background: #fee2e2; color: #991b1b; }
.flash-info { background: #dbeafe; color: #1e40af; }
.flash ul { margin: 0; padding-left: 18px; }

.detalhes { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; }
.detalhes dt { color: var(--cor-muted); font-size: 0.85rem; }
.detalhes dd { margin: 0; }

.paginacao { display: flex; gap: 6px; margin-top: 16px; }
.paginacao a { padding: 6px 11px; border: 1px solid var(--cor-borda); border-radius: 6px; color: var(--cor-texto); }
.paginacao a.ativo { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box {
    width: 100%; max-width: 860px; min-height: 520px; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 18px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
@media (max-width: 720px) { .login-box { grid-template-columns: 1fr; min-height: 0; } }

.login-marca {
    background: linear-gradient(160deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 14px; padding: 48px 40px;
}
@media (max-width: 720px) { .login-marca { padding: 32px 28px 8px; } }
.login-marca-icone {
    display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
    border-radius: 16px; background: rgba(255,255,255,.15);
}
.login-marca h2 { margin: 0; font-size: 1.5rem; }
.login-marca p { margin: 0; color: rgba(255,255,255,.85); max-width: 30ch; }

.login-form { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
@media (max-width: 720px) { .login-form { padding: 28px 28px 40px; } }
.login-form h1 { margin: 0 0 4px; font-size: 1.6rem; }
.login-form .muted { margin-bottom: 20px; }
.login-form label { margin-top: 14px; }
.login-form .btn-block { margin-top: 24px; padding: 11px; }

.viewer-card { padding: 0; overflow: hidden; }
.viewer-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--cor-borda);
}
.viewer-canvas-wrap { width: 100%; height: 520px; background: var(--cor-card); }
.viewer-canvas-wrap canvas { display: block; cursor: grab; }
.viewer-canvas-wrap canvas:active { cursor: grabbing; }

/* ==================================================================
   Casca do sistema: sidebar + topbar (todas as páginas exceto login e o
   MiniCAD, que continuam full-page). Fica de fora de .container — o
   .app-conteudo assume o papel que .container tinha antes.
   ================================================================== */

body:has(.app-shell) { margin: 0; }
.app-shell { display: flex; min-height: 100vh; background: var(--cor-plano); }

.app-sidebar {
    flex-shrink: 0; width: 240px; display: flex; flex-direction: column;
    background: var(--cor-sidebar); color: var(--cor-sidebar-texto);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
}
.app-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.app-sidebar-brand-icone {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.app-sidebar-brand-texto { line-height: 1.15; min-width: 0; }
.app-sidebar-brand-nome { display: block; color: #fff; font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-brand-tagline { display: block; font-size: .7rem; color: var(--cor-sidebar-texto); white-space: nowrap; }

.app-sidebar-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px;
    color: var(--cor-sidebar-texto); font-size: .87rem; font-weight: 500;
}
.app-nav-item svg { flex-shrink: 0; }
.app-nav-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-item:hover { background: var(--cor-sidebar-hover); color: #fff; text-decoration: none; }
.app-nav-item-ativo, .app-nav-item-ativo:hover { background: var(--cor-primaria); color: #fff; }
.app-nav-item-desabilitado, .app-nav-item-desabilitado:hover {
    background: none; color: #565d6b; cursor: default;
}
.app-nav-em-breve {
    flex-shrink: 0; font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: #7b8291;
}

.app-sidebar-footer { padding: 14px 18px 18px; font-size: .72rem; color: #5b6272; border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; }
.app-sidebar-footer p { margin: 0 0 2px; }

.app-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
    padding: 12px 22px; background: var(--cor-card); border-bottom: 1px solid var(--cor-borda);
}
.app-topbar-hamburguer {
    display: none; flex-shrink: 0; width: 34px; height: 34px; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--cor-borda); border-radius: 7px; color: var(--cor-texto-sec); cursor: pointer;
}

.app-search { position: relative; flex: 1; min-width: 0; max-width: 420px; }
.app-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--cor-muted); pointer-events: none; }
.app-search input {
    width: 100%; padding: 8px 46px 8px 34px; border: 1px solid var(--cor-borda); border-radius: 8px;
    background: var(--cor-plano); color: var(--cor-texto); font: inherit; font-size: .86rem;
}
.app-search kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .68rem; font-family: inherit;
    padding: 2px 6px; border-radius: 4px; background: var(--cor-card); border: 1px solid var(--cor-borda); color: var(--cor-muted);
}

.app-dropdown-wrap { position: relative; flex-shrink: 0; }
.app-btn-dropdown {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--cor-borda); border-radius: 8px;
    background: var(--cor-card); color: var(--cor-texto-sec); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.app-btn-dropdown:hover { color: var(--cor-texto); border-color: var(--cor-muted); }
.app-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 240px;
    background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 6px;
    box-shadow: 0 10px 30px rgba(16,24,40,.14);
}
.app-dropdown:not([hidden]) { display: block; }
.app-dropdown-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 6px; border: none;
    background: none; color: var(--cor-texto); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.app-dropdown-item:hover { background: var(--cor-plano); }
.app-dropdown-check { flex-shrink: 0; width: 16px; color: var(--cor-primaria); visibility: hidden; }
.app-dropdown-item-ativo .app-dropdown-check { visibility: visible; }
.app-dropdown-nota { padding: 8px 10px 4px; font-size: .72rem; color: var(--cor-muted); border-top: 1px solid var(--cor-borda); margin-top: 4px; }
.app-dropdown-vazio { padding: 16px 10px; text-align: center; font-size: .84rem; color: var(--cor-muted); }

.app-topbar-acao-primaria { margin-left: auto; flex-shrink: 0; }
.app-topbar-icones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.app-icon-btn {
    position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 8px; border: 1px solid transparent; background: none; color: var(--cor-texto-sec); cursor: pointer;
}
.app-icon-btn:hover { background: var(--cor-plano); color: var(--cor-texto); }
.app-icon-btn .app-badge-numero {
    position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
    background: var(--cor-perigo); color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.app-user-btn { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-card); cursor: pointer; }
.app-user-btn:hover { border-color: var(--cor-muted); }
.app-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cor-primaria); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
    object-fit: cover;
}
.app-user-btn-texto { text-align: left; line-height: 1.15; }
.app-user-btn-nome { display: block; font-size: .84rem; font-weight: 600; color: var(--cor-texto); }
.app-user-btn-papel { display: block; font-size: .72rem; color: var(--cor-muted); }
.app-dropdown-user { right: 0; left: auto; min-width: 200px; }

.app-conteudo { flex: 1; padding: 22px 26px 60px; max-width: 1400px; width: 100%; margin: 0 auto; }

.app-sidebar-backdrop { display: none; }

@media (max-width: 960px) {
    .app-sidebar {
        position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 0 2000px rgba(0,0,0,0);
    }
    .app-sidebar.app-sidebar-aberta { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,.3); }
    .app-topbar-hamburguer { display: flex; }
    .app-sidebar-backdrop.app-sidebar-aberta { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; }
    .app-search { max-width: none; }
}
@media (max-width: 720px) {
    .app-topbar { flex-wrap: wrap; }
    .app-search { order: 10; flex-basis: 100%; max-width: none; }
    .app-conteudo { padding: 16px 14px 40px; }
}

/* ---------------- Dashboard ---------------- */

.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-kpis { grid-template-columns: 1fr; } }

.dash-kpi { display: flex; gap: 14px; align-items: flex-start; }
.dash-kpi-icone {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff;
}
.dash-kpi-corpo { min-width: 0; flex: 1; }
.dash-kpi-label { font-size: .8rem; color: var(--cor-muted); display: block; margin-bottom: 2px; }
.dash-kpi-valor { font-size: 1.6rem; font-weight: 700; display: block; line-height: 1.2; }
.dash-kpi-delta { font-size: .78rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.dash-kpi-delta-alta { color: var(--cor-sucesso); }
.dash-kpi-delta-baixa { color: var(--cor-perigo); }
.dash-kpi-delta-neutra { color: var(--cor-muted); }

.dash-row { display: grid; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.dash-row-3 { grid-template-columns: 1.7fr 1fr 1fr; }
.dash-row-2a { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) { .dash-row-3, .dash-row-2a { grid-template-columns: 1fr; } }

.dash-card { display: flex; flex-direction: column; }
.dash-card-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-card-cabecalho h2 { margin: 0; font-size: 1rem; }
.dash-card-link { font-size: .8rem; font-weight: 600; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.dash-legend-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--cor-texto-sec); }
.dash-legend-ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.dash-chart-wrap { position: relative; }
.dash-chart-tooltip {
    position: absolute; pointer-events: none; z-index: 5; background: var(--cor-texto); color: var(--cor-fundo);
    font-size: .74rem; padding: 6px 9px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .08s;
}
.dash-chart-tooltip.mostrar { opacity: 1; }

.dash-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; justify-content: center; }
.dash-donut-total { text-align: center; }
.dash-donut-total-num { font-size: 1.7rem; font-weight: 700; display: block; }
.dash-donut-total-label { font-size: .72rem; color: var(--cor-muted); }
.dash-donut-lista { list-style: none; margin: 0; padding: 0; width: 100%; }
.dash-donut-lista li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .8rem; }
.dash-donut-lista .dash-legend-ponto { width: 8px; height: 8px; }
.dash-donut-lista span:nth-child(2) { flex: 1; color: var(--cor-texto-sec); }
.dash-donut-lista strong { font-weight: 700; }
.dash-donut-lista small { color: var(--cor-muted); font-weight: 400; margin-left: 3px; }

.dash-calc { opacity: .55; pointer-events: none; user-select: none; }
.dash-calc .card-selo-em-breve { opacity: 1; pointer-events: auto; user-select: auto; }
.card-selo-em-breve {
    display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; background: var(--cor-primaria-fraca); color: var(--cor-primaria);
}
.dash-campo-mini label { margin: 10px 0 3px; font-size: .78rem; }

.dash-tabela-wrap { overflow-x: auto; }

.dash-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; text-align: center; color: var(--cor-muted); flex: 1; }
.dash-vazio svg { opacity: .5; }
.dash-vazio p { margin: 0; font-size: .86rem; max-width: 320px; }

.dash-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.dash-lib-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--cor-borda); border-radius: 8px; color: var(--cor-muted); }

.dash-req-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-req-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--cor-borda); }
.dash-req-item:last-child { border-bottom: none; }

/* ==================================================================
   Editor de Desenho — "Mini CAD": app própria de página inteira, com
   paleta escura fixa (não é mais um tema alternável — as variáveis
   abaixo ficam escopadas em .cad-app pra não vazar pro resto do site).
   ================================================================== */

body.pagina-app { background: #10151A; margin: 0; }
main.container-app { max-width: none; margin: 0; padding: 0; }

.cad-app {
    --cad-fundo: #10151A;
    --cad-painel: #161C22;
    --cad-barra: #1B2027;
    --cad-campo: #232B35;
    --cad-borda: #303944;
    --cad-azul: #1070F8;
    --cad-azul-hover: #2580F4;
    --cad-azul-escuro: #164787;
    --cad-texto: #EDEFF2;
    --cad-texto-sec: #A8B0BA;
    --cad-texto-desab: #787F87;
    --cad-raio: 6px;

    height: 100vh; width: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: var(--cad-fundo); color: var(--cad-texto);
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}
/* Fase UI-CAD-03, seção 11 -- Light Mode real da INTERFACE do MiniCAD (tema PRÓPRIO, separado
   do tema claro/escuro do resto do site -- ver `[data-tema]` aplicado só em #cad-app, nunca em
   <html>). Paleta clara completa, não é só inverter 2 cores. NUNCA muda a cor do CANVAS/desenho
   (grid, eixos, fundo do desenho): essas cores são literais dentro de ctx.fillStyle no próprio
   desenhar() -- sempre foram, em CSS nenhuma -- então já são desacopladas da interface por
   construção, sem precisar de nenhuma arquitetura nova só pra esta fase (UI Theme != Canvas
   Theme, seção 11 do pedido). Persistido em localStorage['minicadTema'] (dark/light/sistema —
   "sistema" é resolvido pra um dos dois via matchMedia no momento de aplicar, nunca fica como
   valor literal do atributo). */
.cad-app[data-tema="light"] {
    --cad-fundo: #F3F4F6;
    --cad-painel: #FFFFFF;
    --cad-barra: #FFFFFF;
    --cad-campo: #F1F2F4;
    --cad-borda: #DCE0E5;
    --cad-azul: #1070F8;
    --cad-azul-hover: #2580F4;
    --cad-azul-escuro: #E8F0FE;
    --cad-texto: #1A1F26;
    --cad-texto-sec: #5B6470;
    --cad-texto-desab: #9AA3AD;
}
.cad-app * { box-sizing: border-box; }
.cad-app button { font: inherit; }
.cad-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.cad-app ::-webkit-scrollbar-track { background: transparent; }
.cad-app ::-webkit-scrollbar-thumb { background: var(--cad-borda); border-radius: 6px; }
.cad-app ::-webkit-scrollbar-thumb:hover { background: var(--cad-texto-desab); }

/* Dentro do editor, os componentes genéricos do site (inputs/botões/cards) herdam a
   paleta escura via as MESMAS variáveis --cor-* que eles já usam — assim não é preciso
   reescrever campo-propriedade/btn/etc, que continuam sendo gerados pelo JS do editor. */
.cad-app {
    --cor-fundo: var(--cad-fundo);
    --cor-texto: var(--cad-texto);
    --cor-muted: var(--cad-texto-sec);
    --cor-borda: var(--cad-borda);
    --cor-primaria: var(--cad-azul);
    --cor-primaria-escura: var(--cad-azul-escuro);
    --cor-card: var(--cad-painel);
    --raio: var(--cad-raio);

    /* Fase UI-CAD-01, seção 10 -- tokens de design nomeados semanticamente, todos APONTANDO
       pras variáveis --cad-* acima (que agora têm valores DIFERENTES em dark/light, ver
       .cad-app[data-tema="light"] -- esses tokens automaticamente acompanham). */
    --cad-token-background: var(--cad-fundo);
    --cad-token-surface: var(--cad-painel);
    --cad-token-surface-hover: var(--cad-campo);
    --cad-token-border: var(--cad-borda);
    --cad-token-text: var(--cad-texto);
    --cad-token-text-muted: var(--cad-texto-sec);
    --cad-token-accent: var(--cad-azul);
    --cad-token-danger: #dc2626;
    --cad-token-warning: #f4c453;
    --cad-token-success: #4caf6a;

    /* Fase UI-CAD-03, seção 11 -- os MESMOS tokens, com os nomes literais pedidos nesta fase
       (--cad-bg/surface-1/2/3/border/text/text-muted/accent/hover/active) -- mantém os
       --cad-token-* acima também (nenhum consumidor existente quebra). --cad-canvas-bg/
       grid-major/grid-minor/axis são declarados por completude (o pedido pede que existam),
       mas NUNCA lidos pelo desenho em si -- ctx.fillStyle no desenhar() usa cores literais
       próprias, sempre foi assim, deliberadamente independente do tema da interface (seção 11:
       "UI Theme != Canvas Theme" -- sem essas variáveis afetarem o canvas não existe risco de
       regressão visual no desenho ao trocar de tema). */
    --cad-bg: var(--cad-fundo);
    --cad-surface-1: var(--cad-painel);
    --cad-surface-2: var(--cad-barra);
    --cad-surface-3: var(--cad-campo);
    --cad-border: var(--cad-borda);
    --cad-text: var(--cad-texto);
    --cad-text-muted: var(--cad-texto-sec);
    --cad-accent: var(--cad-azul);
    --cad-hover: var(--cad-campo);
    --cad-active: var(--cad-azul);
    --cad-canvas-bg: #10151A;
    --cad-grid-major: #303944;
    --cad-grid-minor: #232B35;
    --cad-axis: #1070F8;
}
.cad-app input[type=text], .cad-app input[type=password], .cad-app input[type=color],
.cad-app select, .cad-app textarea {
    background: var(--cad-campo); color: var(--cad-texto); border: 1px solid var(--cad-borda); border-radius: 5px;
}
.cad-app input[type=color] { padding: 2px 3px; height: 30px; cursor: pointer; }
.cad-app input:disabled, .cad-app select:disabled { opacity: .5; cursor: not-allowed; }
.cad-app .btn { background: var(--cad-campo); color: var(--cad-texto); border-color: var(--cad-borda); }
.cad-app .btn:hover { background: var(--cad-borda); }
.cad-app .btn-primary { background: var(--cad-azul); border-color: var(--cad-azul); }
.cad-app .btn-primary:hover { background: var(--cad-azul-hover); }
.cad-app label { color: var(--cad-texto-sec); font-size: .78rem; font-weight: 600; margin: 10px 0 4px; }
.cad-app .muted { color: var(--cad-texto-sec); }

.cad-desabilitado, .cad-desabilitado * { color: var(--cad-texto-desab) !important; cursor: not-allowed; }

/* ---------------- Barra de topo ---------------- */

/* Fase UI-CAD-03B, seção 4 -- grid de 3 colunas em vez de flex: a coluna do meio (busca)
   fica GEOMETRICAMENTE centralizada na largura total da topbar, com as colunas 1/3 (mesmo
   fr, min-width 0 cada) absorvendo a diferença de largura entre esquerda/direita nas duas
   pontas -- nunca sobra um buraco morto de um lado só (o bug real que a versão em flex
   tinha: `.cad-topbar-direita` não tinha `margin-left:auto` nem qualquer regra que a
   grudasse na borda direita, então TODO o espaço livre da tela sobrava depois dela). */
.cad-topbar {
    flex-shrink: 0; height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 4px; padding: 0 14px; min-width: 0;
    background: var(--cad-barra); border-bottom: 1px solid var(--cad-borda);
}
/* A coluna do meio é `auto` (mede exatamente a largura declarada de .cad-topbar-busca) --
   as duas colunas 1fr ganham SEMPRE a mesma largura entre si (mesmo total menos a do meio,
   dividido por 2), o que centraliza a busca de verdade, geometricamente, mesmo com
   esquerda/direita de larguras diferentes. Breakpoints reduzem a largura declarada (não a
   real disponível) -- "reduzir elegantemente" do pedido, sem recorrer a `flex-grow`. */
.cad-topbar-esquerda { display: flex; align-items: center; min-width: 0; justify-self: start; }
.cad-topbar-brand { display: flex; align-items: center; margin-right: 10px; flex-shrink: 0; position: relative; }
.cad-brand-link {
    display: flex; align-items: center; color: var(--cad-texto); background: none; border: 1px solid transparent;
    border-radius: 6px; padding: 2px; cursor: pointer;
}
.cad-brand-link:hover, .cad-topbar-brand.cad-menu-aberto .cad-brand-link { background: var(--cad-campo); text-decoration: none; }
.cad-logo-img { height: 30px; width: auto; display: block; }
.cad-dropdown-menu-app { min-width: 240px; }
.cad-submenu-wrap { position: relative; }
/* .cad-submenu também é .cad-dropdown -- mostrar/esconder já é 100% via [hidden] (o MESMO
   mecanismo/especificidade de qualquer outro .cad-dropdown, ver `.cad-dropdown:not([hidden])`
   acima), só a POSIÇÃO muda aqui (ao lado do item, não embaixo -- por isso `top`/`left`
   precisam de override, nunca `display`, que ficaria disputando especificidade com a regra
   genérica sem necessidade). */
.cad-submenu { left: 100%; top: -6px; margin-left: 4px; }
.cad-dropdown-item-submenu {
    display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
    background: none; border: none; color: var(--cad-texto); padding: 7px 10px; border-radius: 5px;
    font-size: .84rem; cursor: pointer;
}
.cad-dropdown-item-submenu:hover, .cad-submenu-wrap.cad-submenu-aberto .cad-dropdown-item-submenu { background: var(--cad-campo); }
#app-menu-recentes { max-height: 220px; overflow-y: auto; }
.cad-menu-recente-item {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
    background: none; border: none; color: var(--cad-texto); padding: 6px 10px; border-radius: 5px;
    cursor: pointer; font-size: .82rem; gap: 1px;
}
.cad-menu-recente-item:hover { background: var(--cad-campo); }
.cad-menu-recente-meta { font-size: .68rem; color: var(--cad-texto-sec); }

/* Fase UI-HOTFIX-01 — .cad-menu PRECISA de overflow-x:auto (580px de gatilhos não cabem
   nos ~450px disponíveis em 1366×768, e menos ainda abaixo disso — medido, não estimado).
   O bug real nunca foi "ter overflow-x" — foi o CSS forçar overflow-y a virar clipado
   junto (regra do próprio spec: overflow-x != visible força o outro eixo a sair de
   "visible" também), cortando o dropdown (que é descendente de .cad-menu-item, dentro de
   .cad-menu). A saída padrão pra "dropdown precisa escapar de um ancestral com scroll":
   position:fixed no dropdown (nunca clipado por overflow de ancestral, só por
   transform/filter/will-change — nenhum dos dois existe na cadeia .cad-menu-item/.cad-menu/
   .cad-topbar/.cad-app) + JS calculando top/left a partir do retângulo real do gatilho no
   momento de abrir (cad-shell.js, `posicionarDropdownFixo` — sem isso, top:100%/left:0 não
   tem mais significado, já que position:fixed não referencia mais o ancestral relative). */
.cad-menu { display: flex; align-items: stretch; height: 100%; min-width: 0; flex-shrink: 1; overflow-x: auto; overflow-y: hidden; }
.cad-menu-item { position: relative; display: flex; }
.cad-menu-gatilho {
    background: none; border: none; color: var(--cad-texto-sec); padding: 0 11px; height: 100%;
    cursor: pointer; font-size: .86rem; white-space: nowrap;
}
.cad-menu-gatilho:hover { color: var(--cad-texto); }
.cad-menu-item.cad-menu-aberto .cad-menu-gatilho { color: var(--cad-texto); background: var(--cad-campo); border-radius: 5px; }
.cad-menu-dropdown {
    display: none; position: fixed; margin-top: 2px; z-index: 40; min-width: 210px;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 7px; padding: 6px;
    box-shadow: 0 10px 26px rgba(0,0,0,.45); flex-direction: column; gap: 1px;
}
.cad-menu-dropdown:not([hidden]) { display: flex; }
.cad-menu-dropdown-larga { min-width: 320px; }
.cad-menu-acao {
    display: block; width: 100%; text-align: left; background: none; border: none; color: var(--cad-texto);
    padding: 7px 10px; border-radius: 5px; font-size: .84rem; cursor: pointer;
}
.cad-menu-acao:hover { background: var(--cad-campo); }
.cad-menu-acao:disabled { color: var(--cad-texto-desab); cursor: not-allowed; }
.cad-menu-acao:disabled:hover { background: none; }
.cad-menu-acao.ativa { color: var(--cad-azul-hover); }
.cad-menu-sep { height: 1px; background: var(--cad-borda); margin: 5px 2px; }
.cad-menu-info { font-size: .78rem; color: var(--cad-texto-sec); padding: 6px 10px; margin: 0; line-height: 1.5; }

.cad-topbar-acoes { display: flex; align-items: center; gap: 3px; margin-left: auto; height: 100%; }
.cad-topbar-sep { width: 1px; height: 24px; background: var(--cad-borda); margin: 0 6px; flex-shrink: 0; }
.cad-icon-btn {
    display: flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: 6px;
    color: var(--cad-texto-sec); padding: 6px 9px; cursor: pointer; font-size: .8rem; white-space: nowrap; text-decoration: none;
}
.cad-icon-btn:hover { background: var(--cad-campo); color: var(--cad-texto); text-decoration: none; }
.cad-icon-btn:disabled { color: var(--cad-texto-desab); cursor: not-allowed; }
.cad-icon-btn:disabled:hover { background: none; }
.cad-icon-btn.ativa { background: var(--cad-azul); border-color: var(--cad-azul); color: #fff; }
.cad-icon-btn span { display: none; }
@media (min-width: 2000px) { .cad-icon-btn span { display: inline; } }
.cad-chevron { margin-left: 1px; flex-shrink: 0; }

.cad-topbar-brand, .cad-topbar-user { flex-shrink: 0; }
.cad-topbar-acoes { flex-shrink: 0; }

.cad-dropdown-wrap { position: relative; display: flex; }
.cad-dropdown {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 40; min-width: 170px;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 7px; padding: 6px;
    box-shadow: 0 10px 26px rgba(0,0,0,.45); flex-direction: column; gap: 1px;
}
.cad-dropdown:not([hidden]) { display: flex; }
.cad-dropdown-direita { left: auto; right: 0; }
.cad-dropdown-item {
    display: block; width: 100%; text-align: left; background: none; border: none; color: var(--cad-texto);
    padding: 7px 10px; border-radius: 5px; font-size: .84rem; cursor: pointer;
}
/* Fase UI-CAD-03B -- achado real: `.cad-dropdown-item{display:block}` tem a MESMA
   especificidade que a regra padrão do navegador `[hidden]{display:none}`, e como CSS de
   autor sempre vence UA CSS em empate de especificidade, um item com `class="cad-dropdown-
   item" hidden` (ex.: #app-menu-sair, escondido quando window.opener não existe) renderizava
   MESMO ASSIM -- confirmado via screenshot ao vivo. `[hidden]` aqui como seletor de atributo
   (especificidade maior que a classe sozinha) resolve pra qualquer item futuro também. */
.cad-dropdown-item[hidden] { display: none; }
.cad-dropdown-item:hover { background: var(--cad-campo); }
.cad-dropdown-item:disabled { color: var(--cad-texto-desab); cursor: not-allowed; }
.cad-dropdown-item:disabled:hover { background: none; }
.cad-tag-padrao {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--cad-azul-escuro);
    color: var(--cad-texto); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle;
}

.cad-btn-primario {
    display: flex; align-items: center; gap: 6px; background: var(--cad-azul); border: 1px solid var(--cad-azul);
    color: #fff; border-radius: 6px; padding: 7px 13px; cursor: pointer; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.cad-btn-primario:hover { background: var(--cad-azul-hover); border-color: var(--cad-azul-hover); }
.cad-btn-bloco { width: 100%; justify-content: center; }

.cad-topbar-user { display: flex; align-items: center; gap: 8px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--cad-borda); }
.cad-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cad-azul); flex-shrink: 0; }
.cad-topbar-user-info { line-height: 1.3; }
#badge-nome-arquivo { font-size: .82rem; font-weight: 600; color: var(--cad-texto); white-space: nowrap; }
.cad-topbar-user-sub { font-size: .68rem; color: var(--cad-texto-sec); white-space: nowrap; }

/* ---------------- Ribbon (Fase UI-CAD-01) ---------------- */
/* Barra horizontal de comandos, ALTERNATIVA (não substituta) à barra lateral (.cad-sidebar
   vertical, preservada como modo "Compacta") -- os dois nunca duplicam lógica de ativação, só
   HTML: todo botão de ferramenta aqui usa a MESMA convenção .ferramenta/data-ferramenta que a
   barra lateral já usava antes desta fase (quem ativa é sempre selecionarFerramenta(), em
   desenho-editor.js -- o registro COMANDOS_CAD lá documenta cada comando, não reimplementa
   nada); botões de ação (Novo/Abrir/Salvar/Desfazer/Refazer) usam data-acionar, a mesma
   convenção que cad-shell.js já usa pros itens dos menus de texto. */
.cad-ribbon {
    flex-shrink: 0; display: flex; background: var(--cad-painel); border-bottom: 1px solid var(--cad-borda);
}
/* Fase UI-CAD-03D, seção 3 -- position:relative pros chevrons de fallback (absolutos, ver
   .cad-ribbon-chevron abaixo) se ancorarem na página da Ribbon, nunca na janela inteira. */
.cad-ribbon-pagina { display: flex; width: 100%; min-width: 0; position: relative; }
/* Fase UI-CAD-03D, seção 3/4 -- ACHADO REAL desta fase: esconder a scrollbar (seção 6 da
   UI-CAD-03B) sem resolver o overflow de verdade deixava comandos da Ribbon inacessíveis --
   scrollbar-width:none só tira a BARRA visual, o overflow-x:auto continua existindo e
   continua exigindo rolagem manual pra alcançar o conteúdo escondido, sem NENHUM indício
   visual de que há algo lá. Esta fase resolve o overflow de verdade (ver
   ajustarRibbonResponsiva, cad-shell.js -- grupos de prioridade menor/média colapsam pro
   dropdown "Mais" antes de precisar rolar) -- overflow-x:auto continua aqui só como rede de
   segurança (wheel/shift+wheel, chevrons de fallback), não mais como "solução" primária. */
.cad-ribbon-grupos {
    display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; width: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
}
.cad-ribbon-grupos::-webkit-scrollbar { display: none; height: 0; }
/* Fase UI-CAD-03D, seção 4 -- prioridade 1 do pedido ("reduzir gaps/paddings excessivos")
   seguida antes de qualquer colapso: 10px->8px de padding horizontal por grupo (7 grupos em
   HOME = 28px recuperados de graça, sem tocar em nenhum botão/label). */
.cad-ribbon-grupo {
    flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;
    padding: 6px 8px 5px; border-right: 1px solid var(--cad-borda);
}
.cad-ribbon-grupo-botoes { display: flex; align-items: flex-start; gap: 2px; }
.cad-ribbon-grupo-titulo {
    font-size: .62rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase;
    letter-spacing: .06em; text-align: center; margin-top: 4px; white-space: nowrap;
}
/* Fase UI-CAD-03C, seção 10/11 -- largura mínima subiu de 58px pra 68px: achado real via
   screenshot do usuário -- "Rotacio/nar", "Selecio/nar", "Retângu/lo" etc. quebravam NO MEIO
   da palavra (overflow-wrap:break-word da fase anterior permitia isso; a exigência agora é
   NUNCA quebrar uma palavra, só entre palavras tipo "Cota"/"Linear"). Prioridade seguida à
   risca (seção 10 do pedido): 1) largura mínima maior (feito aqui) resolve a maioria dos
   casos sozinha, sem precisar reduzir fonte nem usar ellipsis em nenhuma ferramenta principal. */
.cad-ribbon-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex-shrink: 0;
    background: none; border: 1px solid transparent; border-radius: 6px; color: var(--cad-texto-sec);
    padding: 6px 4px 5px; cursor: pointer; font-size: .66rem; text-align: center; line-height: 1.15;
}
/* Fase UI-CAD-03C -- modificador pros POUCOS rótulos que ainda não cabem em 64/72px mesmo sem
   quebrar palavra (Rotacionar/Aproximar/Selecionar-na-aba-Ferramentas/Propriedades, medidos
   via scrollWidth > clientWidth real, não estimados) -- alargar só ESSES em vez de TODOS os
   botões evita inflar o overflow horizontal de 1920px à toa (a largura base de 58->64/66->72
   já resolve a maioria; só uma largura MAIOR ainda pros casos extremos, seção 10/11 do pedido:
   "aumentar largura mínima do tool item" fala do item que precisa, não da fileira inteira). */
.cad-ribbon-btn-largo { width: 80px; }
.cad-ribbon-btn-grande.cad-ribbon-btn-largo { width: 92px; }
/* Quebra permitida SÓ entre palavras ("Cota"/"Linear" é ok) -- normal é o valor padrão do
   CSS, declarado explícito aqui pra nunca herdar/ganhar um break-word/break-all de algum
   ancestral por engano de novo. min-height reserva a mesma altura pra rótulos de 1 ou 2
   linhas (fileira do grupo sempre alinhada). */
.cad-ribbon-btn span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    white-space: normal; word-break: normal; overflow-wrap: normal; max-width: 100%; min-height: 2.3em; line-height: 1.15;
}
.cad-ribbon-btn svg { flex-shrink: 0; }
.cad-ribbon-btn:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-ribbon-btn.ativa, .cad-ribbon-btn.ativo { background: var(--cad-azul); color: #fff; }
.cad-ribbon-btn:disabled { color: var(--cad-texto-desab); cursor: not-allowed; opacity: .5; }
.cad-ribbon-btn:disabled:hover { background: none; }
/* Fase UI-CAD-03, seção 6/8 -- "ícones grandes pras funções primárias, menores pras
   secundárias" da referência: mesmo botão, só maior (ícone width/height sobem via atributo
   inline no SVG de cada botão -grande, então aqui só precisa alargar a caixa e a fonte). */
.cad-ribbon-btn-grande { width: 72px; font-size: .68rem; padding: 7px 4px 6px; }
.cad-ribbon-grupo-ajuda { flex-direction: column; align-items: flex-start; max-width: 640px; padding: 10px 14px; }
.cad-ribbon-grupo-layers { min-width: 132px; }
.cad-ribbon-select-camada { width: 100%; margin-bottom: 4px; }
/* Fase UI-CAD-03C -- o encolhimento agressivo de largura/fonte/ícone em <=1440px foi
   removido: com "nunca quebrar palavra" como regra dura, encolher pioraria exatamente o
   problema que essa mesma fase pede pra resolver. Fase UI-CAD-03D -- overflow em telas
   menores agora é resolvido de verdade por ajustarRibbonResponsiva() (colapso pra "Mais"),
   não mais só por rolagem horizontal invisível. */

/* ---------------- Ribbon responsiva: "Mais" + chevrons (Fase UI-CAD-03D) ---------------- */
.cad-ribbon-mais-wrap[hidden] { display: none; }
/* Dropdown mais largo que o padrão (170px) -- guarda grupos INTEIROS (ícone+label+título),
   não só texto -- precisa de espaço pros botões respirarem/quebrarem linha.
   position:fixed (não o position:absolute padrão de .cad-dropdown) -- ACHADO REAL desta fase:
   o gatilho ("Mais") mora DENTRO de .cad-ribbon-grupos, que tem overflow-x:auto (mesma causa
   raiz já documentada na Fase UI-HOTFIX-01 pro extinto .cad-menu-dropdown) -- um dropdown
   position:absolute é CLIPADO pelo overflow do ancestral mesmo saindo do fluxo normal;
   position:fixed escapa completamente. Posição real calculada em posicionarDropdownFixo()
   (cad-shell.js, a MESMA função já usada pro menu antigo, reaproveitada) toda vez que abre. */
.cad-ribbon-mais-dropdown {
    display: none; position: fixed; flex-direction: column; min-width: 280px; max-width: 360px; padding: 4px;
    max-height: 70vh; overflow-y: auto;
}
.cad-ribbon-mais-dropdown:not([hidden]) { display: flex; }
/* Grupo colapsado dentro do dropdown: divisor HORIZONTAL entre grupos empilhados (não mais
   vertical, já que aqui a disposição é em coluna) + os botões quebram em várias linhas em vez
   de ficarem numa fileira horizontal só (a largura do dropdown é bem menor que a Ribbon). */
.cad-ribbon-mais-dropdown .cad-ribbon-grupo {
    border-right: none; border-bottom: 1px solid var(--cad-borda); padding: 8px 6px; width: 100%;
}
.cad-ribbon-mais-dropdown .cad-ribbon-grupo:last-child { border-bottom: none; }
.cad-ribbon-mais-dropdown .cad-ribbon-grupo-botoes { flex-wrap: wrap; }
.cad-ribbon-mais-dropdown .cad-ribbon-grupo-titulo { text-align: left; }
/* Fallback extremo (seção 8 do pedido) -- só visíveis se ainda sobrar overflow real mesmo
   com tudo colapsável já dentro de "Mais" (não ocorre nas 4 resoluções-alvo, medido). Flutuam
   sobre a borda da página da Ribbon (position:relative nela, ver acima), nunca ocupam espaço
   próprio na fileira de grupos (isso só pioraria o overflow que existem pra mitigar). */
.cad-ribbon-chevron {
    position: absolute; top: 0; bottom: 0; width: 26px; z-index: 8; display: flex; align-items: center; justify-content: center;
    border: none; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-ribbon-chevron[hidden] { display: none; }
.cad-ribbon-chevron:hover { color: var(--cad-texto); }
.cad-ribbon-chevron-esquerda { left: 0; background: linear-gradient(to right, var(--cad-painel) 55%, transparent); }
.cad-ribbon-chevron-direita { right: 0; background: linear-gradient(to left, var(--cad-painel) 55%, transparent); }

/* ---------------- Modos de interface (Fase UI-CAD-01, default trocado na UI-CAD-03) ---------------- */
/* Ribbon / Compacta (barra lateral) / Ribbon + lateral -- só visibilidade (display:none), NUNCA
   reinicializa o editor/documento/zoom/seleção/ferramenta ativa (a troca é pura CSS +
   redimensionar() do canvas, ver cad-shell.js). Persistido em localStorage
   (minicadInterfaceMode). Fase UI-CAD-03, seção 9 -- default mudou de 'compacta' pra 'ribbon'
   (Ribbon ON, barra lateral OFF por padrão -- só afeta quem NUNCA salvou uma preferência antes;
   quem já tinha uma, mesmo 'compacta', continua exatamente como estava). */
.cad-app.cad-modo-compacta .cad-ribbon, .cad-app.cad-modo-compacta .cad-ribbon-tabs { display: none; }
.cad-app.cad-modo-ribbon .cad-sidebar { display: none; }

/* ---------------- Ribbon tabs (Fase UI-CAD-03, seção 5/6) ---------------- */
/* Linha de abas ACIMA da Ribbon (Home/Inserir/Anotar/Vista/Gerenciar/Exportar/Ferramentas/
   Ajuda) -- cada uma mostra uma "página" diferente de grupos (mesmo espírito das abas
   Propriedades/Camadas/Blocos/Layout do painel direito, ver ativarAbaPainel() em cad-shell.js;
   ativarRibbonTab() é a mesma ideia, só que pra Ribbon). Nunca duplica comando nenhum -- cada
   grupo em cada página usa a MESMA convenção .ferramenta/data-ferramenta ou data-acionar de
   sempre, só reorganiza ONDE cada botão aparece. */
.cad-ribbon-tabs {
    flex-shrink: 0; display: flex; align-items: stretch; gap: 2px; padding: 0 14px; height: 32px;
    background: var(--cad-barra); border-bottom: 1px solid var(--cad-borda); overflow-x: auto;
}
.cad-ribbon-tab {
    flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--cad-texto-sec);
    padding: 0 12px; cursor: pointer; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.cad-ribbon-tab:hover { color: var(--cad-texto); }
.cad-ribbon-tab-ativa { color: var(--cad-texto); border-bottom-color: var(--cad-azul); }
.cad-ribbon-pagina[hidden] { display: none; }

/* ---------------- Properties auto-hide + pin (Fase UI-CAD-01) ---------------- */
/* Só afeta o bloco de propriedades da ENTIDADE selecionada (não os campos de opção de uma
   ferramenta ativa, tipo raio do Fillet/distância do Offset -- esses continuam sempre visíveis
   enquanto a ferramenta está ativa, ver atualizarPainel() em desenho-editor.js). Recolhido
   (hidden) sem nada selecionado, a menos que fixado (pin). */
.cad-painel-propriedades-auto[hidden] { display: none; }
.cad-painel-propriedades-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cad-painel-propriedades-titulo {
    font-size: .68rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase; letter-spacing: .06em;
}
.cad-pin-btn {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
    background: none; border: 1px solid var(--cad-borda); border-radius: 5px; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-pin-btn:hover { color: var(--cad-texto); background: var(--cad-campo); }
.cad-pin-btn.ativo { background: var(--cad-azul); border-color: var(--cad-azul); color: #fff; }

/* ---------------- Indicador visual de origem/UCS (Fase UI-CAD-01) ---------------- */
/* PURAMENTE visual (seção 7 do pedido) -- nunca prende a origem geométrica real (0,0) à tela;
   só indica onde X/Y positivo apontam, fixo no canto (não se move com pan/zoom -- diferente da
   origem real do desenho, que sai da viewport normalmente ao dar Pan). */
.cad-origem-indicador {
    position: absolute; left: 10px; bottom: 10px; width: 32px; height: 32px; pointer-events: none;
    color: var(--cad-texto-desab); z-index: 5;
}

/* Fase UI-CAD-03E, seção 4 -- Navigation widget (Fase UI-CAD-03, seção 19) removido por
   completo (era só decorativo, canto superior direito do canvas -- ver relatório da fase pro
   pedido). O UCS Indicator acima é DIFERENTE e continua em uso, nada aqui o afeta. */

/* ---------------- Topbar: busca / quick access / ícones circulares (Fase UI-CAD-03, seção 4) ---------------- */
.cad-topbar-quickaccess { display: flex; align-items: center; gap: 2px; flex-shrink: 0; min-width: 0; }
/* Fase UI-CAD-03C, seção 7/8 -- wrapper de cada comando configurável da Quick Access.
   display:contents = o <span> não existe pro layout (o filho real -- botão ou .cad-dropdown-wrap
   -- participa do flex de .cad-topbar-quickaccess como se estivesse solto ali, sem caixa extra
   nem gap duplicado); só quando oculto [hidden] é que precisa virar display:none de verdade --
   mesmo achado de especificidade já corrigido em .cad-dropdown-item[hidden] (o [hidden] padrão
   do navegador empataria com display:contents e perderia por ordem, sem esta regra explícita). */
.cad-qa-item { display: contents; }
.cad-qa-item[hidden] { display: none; }
/* Fase UI-CAD-03D, seção 2 -- 2ª rodada de redução: a versão da UI-CAD-03C (420/400/360/335)
   AINDA lia como "grande/desproporcional" na validação visual real -- a largura sozinha não
   era o problema em si, mas o espaço vazio sobrando à direita do texto/ícone criava a
   ilusão de "caixa dentro de caixa" (confirmado via computed style: SEMPRE foi UMA superfície
   só -- 1 background, 1 border, sem wrapper aninhado -- o "container duplo" era percepção
   causada pela largura excessiva, não uma estrutura HTML/CSS duplicada de verdade).
   clamp(min, preferido, max) -- escala suave entre os breakpoints em vez de saltos abruptos;
   faixas-alvo do pedido: 1920->350-380, 1600->330-360, 1440->300-330, 1366->280-310. Altura
   (34px) alinhada com os ícones de 32px da Quick Access e o botão Exportar (35.5px) --
   inalterada nesta fase, já dentro da faixa. */
.cad-topbar-busca {
    width: 365px; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: var(--cad-campo); border: 1px solid var(--cad-borda); border-radius: 8px;
    padding: 0 12px; height: 34px; color: var(--cad-texto-sec); margin: 0 14px; position: relative;
    box-sizing: border-box;
}
@media (max-width: 1600px) { .cad-topbar-busca { width: 345px; } }
@media (max-width: 1440px) { .cad-topbar-busca { width: 315px; } }
@media (max-width: 1366px) { .cad-topbar-busca { width: 295px; } }
.cad-topbar-busca svg { flex-shrink: 0; }
/* Fase UI-CAD-03E, seção 2 -- ACHADO REAL (a fase anterior tinha diagnosticado errado: "é só
   percepção de largura excessiva, nunca 2 caixas de verdade" -- estava enganado). Existem DUAS
   regras GLOBAIS de <input> no site que competem com ".cad-topbar-busca input" e GANHAM por
   especificidade/propriedades não sobrescritas:
     1) `input[type=text]` (linha ~130, genérica do site) -- especificidade (0,1,1) -- `padding:
        9px 10px` (nunca sobrescrito por nenhuma regra anterior) deixava o campo ~40px de altura
        DENTRO de um wrapper de 34px -- o input "vazava" ~3px acima/abaixo da cápsula arredondada
        do wrapper, com border-radius/border PRÓPRIOS (ver item 2) -- esse vazamento É o "bico"/
        "acabamento estranho" na ponta direita reportado (o canto do input, mais alto que o
        wrapper, ficava visível passando por cima do border-radius do wrapper).
     2) `.cad-app input[type=text]` (linha ~551) -- especificidade (0,2,1) -- vencia
        border/border-radius/background, criando uma 2ª borda/fundo visível dentro da cápsula.
   Retificação AGORA (mesma seção): a classe dedicada `.cad-busca-input`, sozinha, tem
   especificidade (0,1,0) -- MENOR que as DUAS regras acima (perde em "b" pra ambas). O fix
   anterior só passava despercebido numa checagem visual porque a cor perdedora (a do
   `.cad-app input[type=text]`, que sempre vencia de qualquer forma) usa a MESMA variável
   `--cad-campo`/`--cad-borda` que o wrapper `.cad-topbar-busca` já usa por conta própria --
   coincidência de cor mascarando a régua de especificidade continuar errada por baixo (viés
   real, confirmado ao vivo via getComputedStyle: background/border do input ainda vinham do
   `.cad-app input[type=text]`, não desta regra). Prefixado com `.cad-app .cad-topbar-busca`
   (3 classes, especificidade 0,3,0) pra vencer as duas de propósito, não por coincidência. */
.cad-app .cad-topbar-busca .cad-busca-input {
    flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; box-sizing: border-box;
    background: none; border: none; border-radius: 0; color: var(--cad-texto); font: inherit; font-size: .84rem;
    line-height: normal; outline: none; box-shadow: none;
}
.cad-app .cad-topbar-busca .cad-busca-input::placeholder { color: var(--cad-texto-desab); }
.cad-busca-resultados {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35); max-height: 320px; overflow-y: auto;
}
.cad-busca-resultados[hidden] { display: none; }
.cad-busca-item {
    display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
    background: none; border: none; color: var(--cad-texto); padding: 8px 12px; cursor: pointer; font-size: .84rem;
}
.cad-busca-item-atalho { color: var(--cad-texto-desab); font-size: .72rem; }
.cad-busca-item:hover, .cad-busca-item-ativo { background: var(--cad-campo); }
.cad-busca-vazio { padding: 10px 12px; color: var(--cad-texto-desab); font-size: .8rem; }
.cad-icon-btn-circular {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
    background: none; border: none; border-radius: 50%; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-icon-btn-circular:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-topbar-direita { display: flex; align-items: center; gap: 4px; flex-shrink: 0; justify-self: end; min-width: 0; }

/* ---------------- Interface Settings modal (Fase UI-CAD-03, seção 10) ---------------- */
/* Fase UI-CAD-03C, seção 2 -- superfície SÓLIDA garantida: var(--cad-painel)/var(--cad-borda)
   agora resolvem de verdade (o modal é descendente de #cad-app, ver nova.php) -- mas o valor
   literal também está aqui como reforço/documentação do contrato visual (nunca opacity no
   container inteiro, nunca um valor computado transparente por engano de novo). */
.cad-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100;
    display: flex; align-items: center; justify-content: center;
}
.cad-modal-overlay[hidden] { display: none; }
.cad-modal {
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 10px;
    width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); color: var(--cad-texto); font-size: 13px;
    opacity: 1;
}
/* Fase UI-CAD-03C, seção 13 -- variante com navegação lateral (GERAL: Interface/Tema/Quick
   Access...). Mais larga que o modal simples de 460px pra caber a coluna de navegação + o
   conteúdo da página sem apertar; altura máxima um pouco maior também. */
/* Fase UI-CAD-03E, seção 3 -- ACHADO REAL: esta regra sobrescrevia overflow-y da base
   .cad-modal (auto) pra "visible" (achando que precisava, pra a lista de navegação/o conteúdo
   internos rolarem sozinhos -- que JÁ rolam, via overflow-y:auto próprio em .cad-modal-nav e
   .cad-modal-paginas, nunca dependeram do overflow do shell). overflow:auto/auto (o padrão) OU
   hidden/hidden CLIPA os filhos no border-radius do shell; overflow:visible/visible (o que
   esta regra forçava) NÃO clipa nada -- o header/footer, com fundo OPACO e cantos QUADRADOS
   próprios, pintavam por cima dos cantos arredondados do modal (só os de CIMA ficavam visíveis
   assim porque o cabeçalho é sticky/fica por cima; embaixo o rodapé tinha um pouco de
   Shadow/z natural disfarçando, mas o bug existia nos 4 cantos). overflow:hidden explícito no
   shell -- nunca rola sozinho, só o conteúdo interno (.cad-modal-paginas) rola. */
.cad-modal-configuracoes { width: 640px; max-height: calc(100vh - 60px); overflow: hidden; display: flex; flex-direction: column; }
.cad-modal-cabecalho {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
    border-bottom: 1px solid var(--cad-borda); position: sticky; top: 0; background: var(--cad-painel); flex-shrink: 0;
}
.cad-modal-titulo { font-size: 1rem; font-weight: 700; color: var(--cad-texto); }
.cad-modal-fechar {
    background: none; border: none; color: var(--cad-texto-sec); cursor: pointer; padding: 4px; border-radius: 5px;
}
.cad-modal-fechar:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-modal-corpo { padding: 18px; }
/* Corpo em duas colunas -- nav à esquerda (largura fixa), páginas à direita (rola sozinha,
   sem empurrar o cabeçalho/rodapé fixos do modal). */
.cad-modal-corpo-flex { display: flex; min-height: 0; flex: 1; }
.cad-modal-nav {
    display: flex; flex-direction: column; width: 168px; flex-shrink: 0; padding: 12px 10px;
    border-right: 1px solid var(--cad-borda); gap: 1px; overflow-y: auto;
}
.cad-modal-nav-titulo {
    font-size: .64rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase;
    letter-spacing: .06em; padding: 4px 8px 6px;
}
.cad-modal-nav-item {
    display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 6px;
    color: var(--cad-texto-sec); padding: 8px 10px; cursor: pointer; font-size: .84rem;
}
.cad-modal-nav-item:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-modal-nav-item-ativa, .cad-modal-nav-item-ativa:hover { background: var(--cad-azul); color: #fff; }
.cad-modal-nav-item:disabled { color: var(--cad-texto-desab); cursor: not-allowed; opacity: .55; }
.cad-modal-nav-item:disabled:hover { background: none; }
.cad-modal-paginas { flex: 1; min-width: 0; padding: 18px 20px; overflow-y: auto; }
.cad-modal-pagina[hidden] { display: none; }
.cad-modal-secao { margin-bottom: 20px; }
.cad-modal-secao:last-child { margin-bottom: 0; }
.cad-modal-secao-titulo {
    font-size: .68rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 10px;
}
.cad-modal-linha { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .86rem; color: var(--cad-texto); cursor: pointer; }
.cad-btn-secundario {
    display: inline-flex; align-items: center; gap: 6px; background: var(--cad-campo); border: 1px solid var(--cad-borda);
    color: var(--cad-texto); border-radius: 6px; padding: 7px 13px; cursor: pointer; font-size: .84rem; font-weight: 600;
}
.cad-btn-secundario:hover { background: var(--cad-borda); }
/* ---------------- Quick Access configurável (Fase UI-CAD-03C, seção 8/9) ---------------- */
.cad-qa-config-linha {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px;
}
.cad-qa-config-linha:hover { background: var(--cad-campo); }
.cad-qa-config-linha label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: .86rem; color: var(--cad-texto); cursor: pointer; }
.cad-qa-config-linha input[type="checkbox"] { cursor: pointer; flex-shrink: 0; }
.cad-qa-config-setas { display: flex; gap: 2px; flex-shrink: 0; }
.cad-qa-config-seta {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    background: none; border: 1px solid var(--cad-borda); border-radius: 5px; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-qa-config-seta:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-qa-config-seta:disabled { opacity: .35; cursor: not-allowed; }
.cad-qa-config-seta:disabled:hover { background: none; }
.cad-modal-linha input { cursor: pointer; }
.cad-modal-rodape { padding: 14px 18px; border-top: 1px solid var(--cad-borda); display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------- Barra de abas + régua ---------------- */

/* A barra de abas mora dentro de .cad-canvas-area, logo acima da régua — assim ela fica
   alinhada, na mesma altura, com as abas Propriedades/Camadas/Blocos do painel à direita
   (que também são o primeiro filho da coluna delas), em vez de ser uma faixa solta cobrindo
   a largura inteira da tela por cima da barra lateral. */
/* Fase UI-CAD-HOTFIX-04 -- divisor permanente entre a barra de abas e a área de viewport
   (régua+canvas). ACHADO REAL: `.cad-tabbar` nunca teve `border-bottom` nenhum, e o fundo dela
   (`--cad-fundo`) é O MESMO da própria `.cad-canvas-area`/canvas por trás -- com a régua
   DESLIGADA (grid zerado, ver `.cad-reguas-ocultas` abaixo) isso é um bloco contínuo sem
   NENHUMA transição visual entre a aba do arquivo e o início do desenho; com a régua LIGADA
   existe só uma diferença sutil de tom (`--cad-fundo` pra `--cad-barra`, a cor de fundo da
   régua em desenho-editor.js/TEMA_ESCURO.reguaFundo), nunca uma linha real. `border-bottom`
   aqui é estrutural (parte de `.cad-tabbar`, nunca da régua) -- existe sempre, nos 2 temas,
   com ou sem régua/Ribbon/painel de Propriedades, sem precisar de nenhuma lógica JS nova. */
.cad-tabbar { flex-shrink: 0; display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px 0; background: var(--cad-fundo); border-bottom: 1px solid var(--cad-borda); }
/* Fase UI-CAD-03, seção 12 -- bug real corrigido: `flex:1` fazia a LISTA de abas ocupar todo o
   espaço disponível, empurrando o botão "+" (irmão dela, fora do flex:1) pro canto direito da
   tela inteira -- longe demais do nome da aba atual. `flex:0 1 auto` deixa a lista do tamanho
   do próprio conteúdo (encolhe se precisar, nunca cresce além dele); o "+" fica colado nela, e
   o espaço vazio restante (há sempre, com só 1 documento) sobra no FUNDO da barra, não entre
   aba e "+". */
.cad-tabbar-lista { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; }
.cad-tab {
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; font-size: .8rem; color: var(--cad-texto-sec);
    background: var(--cad-barra); border: 1px solid var(--cad-borda); border-bottom: none;
    border-radius: 6px 6px 0 0; cursor: pointer; max-width: 220px; flex-shrink: 0;
}
.cad-tab:hover { color: var(--cad-texto); }
.cad-tab-ativa, .cad-tab-ativa:hover { background: var(--cad-fundo); color: var(--cad-texto); }
.cad-tab-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-tab-fechar {
    flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 4px; color: var(--cad-texto-sec); font-size: .85rem;
    line-height: 1; cursor: pointer;
}
.cad-tab-fechar:hover { background: var(--cad-borda); color: var(--cad-texto); }
.cad-tab-add {
    flex-shrink: 0; width: 26px; height: 26px; margin-bottom: 2px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 5px; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-tab-add:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-tab-add:disabled { color: var(--cad-texto-desab); cursor: not-allowed; }
.cad-tab-add:disabled:hover { background: none; }

/* ---------------- Corpo: sidebar / canvas / painel ---------------- */

.cad-corpo { flex: 1; min-height: 0; display: flex; }

.cad-sidebar {
    flex-shrink: 0; width: 168px; display: flex; flex-direction: column; min-height: 0;
    background: var(--cad-painel); border-right: 1px solid var(--cad-borda);
}
.cad-sidebar-lista { flex: 1; overflow-y: auto; padding: 10px 8px; }
.cad-sidebar-secao { margin-bottom: 14px; }
.cad-sidebar-secao:last-child { margin-bottom: 4px; }
.cad-sidebar-titulo {
    font-size: .66rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase;
    letter-spacing: .06em; padding: 0 8px 6px;
}
.cad-sidebar-item {
    display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: 6px;
    color: var(--cad-texto-sec); padding: 7px 8px; cursor: pointer; font-size: .82rem; text-align: left;
}
.cad-sidebar-item svg { flex-shrink: 0; }
.cad-sidebar-item:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-sidebar-item.ativa { background: var(--cad-azul); color: #fff; }
.cad-sidebar-item:disabled { color: var(--cad-texto-desab); cursor: not-allowed; }
.cad-sidebar-item:disabled:hover { background: none; }
.cad-sidebar-colapsar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    background: none; border: none; border-top: 1px solid var(--cad-borda); color: var(--cad-texto-sec);
    padding: 9px; cursor: pointer;
}
.cad-sidebar-colapsar:hover { color: var(--cad-texto); background: var(--cad-campo); }

.cad-sidebar.cad-sidebar-colapsada { width: 52px; }
.cad-sidebar.cad-sidebar-colapsada .cad-sidebar-titulo,
.cad-sidebar.cad-sidebar-colapsada .cad-sidebar-item span { display: none; }
.cad-sidebar.cad-sidebar-colapsada .cad-sidebar-item { justify-content: center; padding: 8px; }
.cad-sidebar.cad-sidebar-colapsada .cad-sidebar-colapsar svg { transform: rotate(180deg); }

/* Fase ELLIPSE-ADVANCED-01 -- split-button da Elipse (Centro / Eixo,Extremidade / Arco
   Elíptico): o botão principal continua sendo .cad-sidebar-item de sempre (clique =
   ativa a ferramenta no modo atual/último usado); só uma seta estreita ao lado abre o
   dropdown de modos, reaproveitando .cad-dropdown/.cad-dropdown-item já existentes (nunca um
   componente novo). Escondida no modo colapsado -- nesse modo só ícones cabem, e o dropdown
   de modo é um recurso secundário. */
.cad-sidebar-item-split { display: flex; align-items: stretch; gap: 2px; position: relative; }
.cad-sidebar-item-split .cad-sidebar-item { flex: 1; min-width: 0; }
.cad-sidebar-split-seta {
    flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 6px; color: var(--cad-texto-sec); cursor: pointer;
}
.cad-sidebar-split-seta:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-sidebar-item-split .cad-elipse-modo-dropdown { top: 100%; right: 0; left: auto; margin-top: 2px; }
.cad-sidebar.cad-sidebar-colapsada .cad-sidebar-split-seta { display: none; }

/* Versão Ribbon do mesmo split-button -- botão principal continua .cad-ribbon-btn (ícone
   grande, rótulo embaixo); a seta vira um pequeno badge no canto inferior direito, só
   perceptível ao passar o mouse pelo grupo inteiro (fora disso fica discreta, não compete
   visualmente com o ícone principal). */
.cad-ribbon-btn-split-wrap { position: relative; }
.cad-ribbon-btn-split-seta {
    position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 4px; color: var(--cad-texto-sec); cursor: pointer; padding: 0;
}
.cad-ribbon-btn-split-seta:hover { background: var(--cad-campo); color: var(--cad-texto); }
.cad-ribbon-btn-split-wrap .cad-elipse-modo-dropdown { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }

.cad-elipse-modo-item { position: relative; }
.cad-elipse-modo-item.cad-elipse-modo-ativo { color: var(--cad-azul); font-weight: 600; }
.cad-elipse-modo-item.cad-elipse-modo-ativo::after { content: '✓'; position: absolute; right: 10px; }

.cad-canvas-area { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--cad-fundo); }

.regua-container {
    flex: 1; min-height: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 20px minmax(0, 1fr);
    border-bottom: 1px solid var(--cad-borda); overflow: hidden;
}
/* Fase UI-CAD-03B, seção 10 -- régua vertical encolhida de 30px pra 20px (largura equivalente
   à altura de 20px da horizontal, "proporção profissional" do pedido -- 30px ficava pesada/
   larga demais perto da referência). Ajuste combinado em desenho-editor.js (desenharReguas)
   -- o texto rotacionado da régua vertical precisa de um pouco menos de margem própria pra
   continuar legível/não cortado nos 20px novos (ver comentário lá). */
/* Fase UI-CAD-03, seção 2/3 -- bug real corrigido: uma trilha `1fr` de CSS Grid tem mínimo
   IMPLÍCITO `auto` (não 0), que pro <canvas> (elemento substituído, ver comentário abaixo)
   considera a largura/altura que ELE MESMO já tem via style inline (redimensionar() em
   desenho-editor.js pina width/height nele a cada resize) como seu conteúdo mínimo -- isso
   TRAVA a trilha nesse tamanho pra sempre, mesmo a janela encolhendo depois (o resize handler
   roda de novo, mas lê wrap.clientWidth de uma célula de grid que nunca ficou menor que o
   <canvas> que ela mesma vai conter -- um loop que nenhum resize futuro corrige sozinho, MESMA
   causa raiz da régua, um nível acima). `minmax(0, 1fr)` derruba esse mínimo implícito pra 0,
   deixando a trilha (e o #canvas-wrap dentro dela) encolher livremente de verdade. */
.regua-canto { grid-column: 1; grid-row: 1; background: var(--cad-barra); border-right: 1px solid var(--cad-borda); border-bottom: 1px solid var(--cad-borda); }
/* <canvas> é um elemento substituído — o Grid não estica esse tipo de elemento pra
   preencher a célula por padrão (só faz isso com caixas "normais"), então sem essa
   largura/altura explícitas o canvas ficava do tamanho intrínseco padrão dele
   (300x150), cortando/desalinhando a régua em vez de preencher a fina faixa de 20/30px. */
.regua { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.regua-h { grid-column: 2; grid-row: 1; border-bottom: 1px solid var(--cad-borda); cursor: row-resize; }
.regua-v { grid-column: 1; grid-row: 2; border-right: 1px solid var(--cad-borda); cursor: col-resize; }
/* Fase UI-CAD-03B, seção 11 -- as 4 posições de grade acima (regua-canto/h/v) e #canvas-wrap
   abaixo precisam ser EXPLÍCITAS (grid-column/row), não deixadas pro auto-placement -- achado
   real via teste ao vivo do Ruler Toggle: escondendo regua-canto/h/v com `display:none` (ver
   .cad-reguas-ocultas mais abaixo), eles saem da grade por completo, e o auto-placement
   (que só existia por ordem no DOM até agora) reposicionava #canvas-wrap pra célula (1,1) --
   que essa mesma classe zera pra 0×0 -- em vez de manter (2,2), a célula grande que devia
   ocupar. #canvas-wrap encolhia pra 0×0 (canvas caía no piso de 100×100px de
   redimensionar()) exatamente quando devia CRESCER pra preencher o espaço liberado.
   Posição fixa nos 4 = nunca mais depende de quantos itens estão visíveis. */
#canvas-wrap { grid-column: 2; grid-row: 2; }

/* ---------------- Ruler toggle (Fase UI-CAD-03B, seção 11) ---------------- */
/* Zera as 2 trilhas fixas da grade (não só `display:none` nas réguas) -- é a mesma técnica
   de #canvas-wrap sempre observado por ResizeObserver (ver redimensionar() em
   desenho-editor.js) que já corrigiu o bug do grid travado nesta mesma fase anterior: zerar a
   trilha muda o clientWidth/Height de #canvas-wrap na hora, o que já dispara o
   ResizeObserver sozinho -- nenhuma chamada extra de redimensionar()/desenhar() precisa
   acontecer por causa do toggle em si. Zoom/pan/geometria/seleção nunca são tocados aqui,
   só o layout. */
.cad-app.cad-reguas-ocultas .regua-canto,
.cad-app.cad-reguas-ocultas .regua-h,
.cad-app.cad-reguas-ocultas .regua-v { display: none; }
.cad-app.cad-reguas-ocultas .regua-container { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }

/* ---------------- Painéis: Topbar / Linha de comando / Barra de status (Fase UI-CAD-03B, seção 15) ---------------- */
/* Os 3 são elementos flex-shrink:0 dentro de containers flex-column já existentes (a topbar
   dentro de #tela-editor/.cad-corpo-wrap; cmdbar/statusbar dentro de .cad-canvas-area, ao
   lado de .regua-container, que é flex:1) -- escondê-los com display:none já libera o
   espaço pro canvas automaticamente, o MESMO mecanismo que .cad-modo-compacta já usa pra
   esconder a Ribbon; nenhuma regra de grid/flex adicional precisa mudar. */
.cad-app.cad-oculta-topbar .cad-topbar { display: none; }
.cad-app.cad-oculta-cmdline .editor-cmdbar { display: none; }
.cad-app.cad-oculta-statusbar .editor-statusbar { display: none; }

/* ---------------- Modo Imersivo -- fallback de tela cheia (Fase FULLSCREEN-UX-02) ---------------- */
/* Usado por configurarTelaCheia() (cad-shell.js) quando a Fullscreen API nativa não está
   disponível, ou a Keyboard Lock API (que garante que Esc não vaze pro navegador dentro dela)
   não existe/falha nesse navegador -- CSS puro, nunca a Fullscreen API real, propositalmente:
   assim o Esc chega como um keydown comum, 100% sob controle do MiniCAD, em qualquer navegador
   (Firefox/Safari incluídos). position:fixed cobre a janela inteira por cima de qualquer
   scroll/margem residual da página -- mesmo efeito visual de tela cheia, sem depender dela. */
.cad-app.cad-imersivo-fallback {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
}

.viewer-canvas-wrap { height: 100%; width: 100%; position: relative; background: var(--cad-fundo); overflow: hidden; }
canvas#canvas-editor { display: block; cursor: default; }

/* Alternância Modelo/Layout — igual às abas Model/Layout1 do AutoCAD, na parte de baixo
   da área de desenho. */
.cad-viewmode-tabs { flex-shrink: 0; display: flex; gap: 2px; padding: 4px 8px 0; background: var(--cad-barra); border-bottom: 1px solid var(--cad-borda); }
.cad-viewmode-tab {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: .74rem; font-weight: 600;
    color: var(--cad-texto-sec); background: none; border: none; border-radius: 4px 4px 0 0; cursor: pointer;
}
.cad-viewmode-tab:hover { color: var(--cad-texto); background: var(--cad-campo); }
.cad-viewmode-tab-ativa, .cad-viewmode-tab-ativa:hover { color: var(--cad-texto); background: var(--cad-fundo); }
/* Fase UI-CAD-03, seção 17 -- Layout2/"+" mantidos visualmente como na referência, mas Layout
   ainda não é funcional (só Modelo funciona de verdade) -- por isso disabled de verdade
   (nunca finge responder a clique), com opacidade reduzida pra diferenciar do que funciona. */
.cad-viewmode-tab:disabled { cursor: not-allowed; opacity: .45; }
.cad-viewmode-tab:disabled:hover { background: none; color: var(--cad-texto-sec); }
.cad-viewmode-tab-add { padding: 5px 8px; }

.editor-cmdbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--cad-barra); color: var(--cad-texto-sec);
    font-size: .8rem; flex-shrink: 0; border-bottom: 1px solid var(--cad-borda);
}
.editor-cmdbar-prompt { color: var(--cad-texto-desab); white-space: nowrap; }
/* Fase COMMAND-UX-02, seção 5 -- prompt contextual da ferramenta ativa (LINHA/RETÂNGULO/
   CÍRCULO), escrito ao lado do "Comando:" fixo -- mesmo texto do tooltip flutuante
   (.prompt-flutuante abaixo), nunca outro. `hidden` (JS) some com os dois quando nenhuma
   das 3 ferramentas do escopo está ativa. */
.editor-cmdbar-prompt-ativo { color: var(--cad-texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-input-wrap { position: relative; flex: 1; min-width: 0; }
.editor-cmdbar input#linha-comando {
    width: 100%; background: transparent; border: none; color: var(--cad-texto); font: inherit; padding: 4px 2px; outline: none;
}
.editor-cmdbar-echo { color: var(--cad-texto-sec); white-space: nowrap; font-size: .74rem; }
.editor-cmdbar-echo-cancelado { color: #f87171; font-weight: 600; }
#status-ferramenta { display: inline-flex; align-items: center; }
.cad-cmdbar-icone { flex-shrink: 0; color: var(--cad-texto-desab); }

/* ---------------- Autocomplete da linha de comando (estilo AutoCAD) ---------------- */
.cmd-autocomplete {
    position: absolute; bottom: calc(100% + 6px); left: -2px; z-index: 40; min-width: 220px; max-width: 320px;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 8px; padding: 4px;
    box-shadow: 0 -10px 28px rgba(0,0,0,.5); max-height: 260px; overflow-y: auto;
}
.cmd-autocomplete:not([hidden]) { display: block; }
/* Variante que flutua na área de desenho (perto do cursor) — usada quando o usuário começa a
   digitar um atalho SEM ter clicado na linha de comando primeiro, igual ao dynamic input do
   AutoCAD: a sugestão aparece perto de onde ele está desenhando, não lá embaixo na barra. */
.cmd-autocomplete-canvas { position: absolute; bottom: auto; left: auto; z-index: 20; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.cmd-autocomplete-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 5px; border: none;
    background: none; color: var(--cad-texto-sec); font: inherit; font-size: .8rem; text-align: left; cursor: pointer;
}
.cmd-autocomplete-item svg { flex-shrink: 0; color: var(--cad-texto-desab); }
.cmd-autocomplete-item strong { color: var(--cad-texto); font-weight: 700; }
.cmd-autocomplete-item span { color: var(--cad-texto-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-autocomplete-item:hover, .cmd-autocomplete-item-ativo { background: var(--cad-azul); }
.cmd-autocomplete-item:hover strong, .cmd-autocomplete-item:hover span, .cmd-autocomplete-item:hover svg,
.cmd-autocomplete-item-ativo strong, .cmd-autocomplete-item-ativo span, .cmd-autocomplete-item-ativo svg { color: #fff; }

/* ---------------- Biblioteca de blocos ---------------- */
.cad-bloco-card {
    display: flex; gap: 10px; align-items: center; border: 1px solid var(--cad-borda); border-radius: 8px;
    padding: 9px; margin-bottom: 9px; background: var(--cad-campo);
}
.cad-bloco-thumb {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 6px; background: var(--cad-fundo);
    border: 1px solid var(--cad-borda); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cad-bloco-thumb svg { width: 100%; height: 100%; display: block; }
.cad-bloco-info { flex: 1; min-width: 0; }
.cad-bloco-nome { font-size: .84rem; font-weight: 600; color: var(--cad-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-bloco-meta { font-size: .7rem; color: var(--cad-texto-desab); }
.cad-bloco-acoes { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.cad-bloco-btn {
    padding: 4px 10px; font-size: .7rem; border-radius: 5px; border: 1px solid var(--cad-borda);
    background: var(--cad-fundo); color: var(--cad-texto-sec); cursor: pointer;
}
.cad-bloco-btn:hover { color: var(--cad-texto); border-color: var(--cad-texto-desab); }
.cad-bloco-btn-excluir:hover { color: #f87171; border-color: #f87171; }
.cad-blocos-vazio { text-align: center; color: var(--cad-texto-desab); font-size: .82rem; padding: 20px 8px; }

/* ---------------- Tela de início (antes de entrar no editor) ---------------- */
/* #tela-inicio also carries .cad-app (pra herdar as variáveis --cad-* e os estilos genéricos
   de input/select) e .cad-app já define "display: flex" — que, por ser regra de autor, vence
   o "display: none" do [hidden] do user-agent mesmo com especificidade menor (a origem da regra
   importa mais que a especificidade nessa comparação). Mesmo problema já resolvido uma vez nesse
   arquivo pro .osnap-flyout; aqui a correção é uma regra [hidden] mais específica (id + atributo). */
#tela-inicio[hidden], #tela-editor[hidden] { display: none; }
.cad-tela-inicio { overflow-y: auto; }
/* Fase BOOT-STABILITY-01 -- substitui a antiga tela neutra de boot (#tela-boot, splash com logo,
   removida: o pedido explicitamente não quer mais nenhuma tela escura/logo/spinner durante F5).
   Quando a sessão de Recovery está marcada ativa, o script inline síncrono em nova.php (ANTES do
   1º paint) revela #tela-editor diretamente (o shell normal do editor, não uma tela separada) e
   aplica esta classe -- só bloqueia interação (pointer-events) enquanto desenho-editor.js ainda
   não confirmou o que fazer com o IndexedDB (aplicar o draft OU cair pra Tela Inicial, ver
   docs/adr/017-local-recovery.md). Sem overlay visual, sem spinner, sem texto -- o canvas
   normal (vazio, no estado inicial) já é a única pista visual, e essa janela costuma ser curta
   (dezenas de ms). Removida assim que a decisão de boot é tomada, em qualquer desfecho. */
.cad-aguardando-recovery { pointer-events: none; }
.cad-inicio-topo {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; border-bottom: 1px solid var(--cad-borda);
}
.cad-inicio-logo { height: 40px; width: auto; display: block; }
.cad-inicio-link-sistema { color: var(--cad-texto-sec); font-size: .82rem; }
.cad-inicio-link-sistema:hover { color: var(--cad-texto); text-decoration: none; }

.cad-inicio-corpo { max-width: 980px; margin: 0 auto; padding: 36px 28px 60px; width: 100%; }

.cad-inicio-acoes { display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; }
.cad-inicio-acao {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; padding: 18px 22px;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 10px;
    color: var(--cad-texto); font-size: .92rem; font-weight: 600; cursor: pointer;
}
.cad-inicio-acao:hover { border-color: var(--cad-azul); background: var(--cad-campo); }
.cad-inicio-acao svg { flex-shrink: 0; color: var(--cad-azul); }

.cad-inicio-secao-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.cad-inicio-secao-cabecalho h2 { font-size: 1rem; margin: 0; color: var(--cad-texto); }
.cad-inicio-controles { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* BUG-MINICAD-02: select e grupo Grade/Lista dividiam espaço com flex-shrink:1 default nos
   dois lados (nenhum tinha min-width/flex-shrink explícito) -- em qualquer combinação de
   viewport/zoom/nomes de pasta longos o bastante pra apertar a linha, os dois encolhiam
   juntos e o grupo de botões (dentro de .cad-inicio-toggle-visual, que tem overflow:hidden)
   ficava visualmente cortado. O select é o elemento que faz sentido ceder espaço (min-width:0
   deixa encolher além do próprio texto/conteúdo, igual .cad-inicio-select já fazia
   implicitamente antes só que sem garantia nenhuma); o grupo de botões nunca deve encolher
   (flex-shrink:0, abaixo) -- sempre os 30x28px inteiros, ou reflui pra linha de baixo via o
   flex-wrap já existente em .cad-inicio-secao-cabecalho, nunca cortado no meio.
   .cad-inicio-controles ganha min-width:0 pelo mesmo motivo, um nível acima: sem isso, o
   tamanho mínimo automático dele (como item flex de .cad-inicio-secao-cabecalho) ficaria
   travado pela soma dos filhos "auto", impedindo o próprio filtro de pastas de ceder espaço
   de verdade quando a LINHA INTEIRA (título + controles) precisa encolher. */
.cad-inicio-select { padding: 5px 8px; font-size: .78rem; flex: 1; min-width: 0; }
.cad-inicio-toggle-visual { display: flex; flex-shrink: 0; border: 1px solid var(--cad-borda); border-radius: 6px; overflow: hidden; }
.cad-inicio-toggle-btn {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 28px;
    background: var(--cad-campo); color: var(--cad-texto-sec); border: none; cursor: pointer;
}
.cad-inicio-toggle-btn:hover { color: var(--cad-texto); }
.cad-inicio-toggle-ativo { background: var(--cad-azul); color: #fff; }

.cad-inicio-vazio { text-align: center; color: var(--cad-texto-desab); font-size: .88rem; padding: 40px 8px; }

.cad-inicio-lista-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.cad-inicio-lista-grade .cad-inicio-card { flex-direction: column; align-items: stretch; }
.cad-inicio-lista-grade .cad-inicio-thumb { width: 100%; height: 130px; }

.cad-inicio-lista-lista { display: flex; flex-direction: column; gap: 8px; }
.cad-inicio-lista-lista .cad-inicio-card { flex-direction: row; align-items: center; }
.cad-inicio-lista-lista .cad-inicio-thumb { width: 46px; height: 46px; flex-shrink: 0; }

.cad-inicio-card {
    position: relative; display: flex; gap: 10px; background: var(--cad-painel); border: 1px solid var(--cad-borda);
    border-radius: 8px; padding: 10px; cursor: pointer;
}
.cad-inicio-card:hover { border-color: var(--cad-azul); }
.cad-inicio-thumb {
    background: var(--cad-fundo); border: 1px solid var(--cad-borda); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cad-inicio-thumb svg { width: 100%; height: 100%; display: block; }
.cad-inicio-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.cad-inicio-nome { font-size: .84rem; font-weight: 600; color: var(--cad-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-inicio-meta { font-size: .7rem; color: var(--cad-texto-desab); }
.cad-inicio-excluir {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--cad-campo); color: var(--cad-texto-sec); cursor: pointer; font-size: .7rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.cad-inicio-excluir:hover { background: #f87171; color: #fff; }

.editor-statusbar {
    display: flex; gap: 12px; align-items: center; padding: 7px 14px; background: var(--cad-barra); color: var(--cad-texto-sec);
    font-size: .76rem; flex-shrink: 0;
    /* Fase UI-CAD-01 -- era `flex-wrap: wrap` antes desta fase; com MODEL/1:1 novos (seção 6 do
       pedido) o conteúdo total passou a ultrapassar a largura disponível em viewports comuns
       (1400px, por ex.), fazendo a barra quebrar pra 2 linhas e ENCOLHER a altura do canvas
       (regressão real, encontrada rodando o smoke E2E existente -- a barra podia quebrar só
       durante certas interações, não sempre, mudando a altura do canvas no MEIO de um fluxo já
       em andamento). Rola horizontalmente em vez de quebrar linha -- mesmo princípio já usado
       na Ribbon/no menu de texto do topo (nunca esmagar/mudar de altura, sempre rolar). */
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
.cad-status-unidade { color: var(--cad-texto-desab); }
.cad-status-sep { width: 1px; height: 16px; background: var(--cad-borda); }
.cad-status-espaco-escala { display: inline-flex; gap: 5px; align-items: baseline; }
.cad-status-espaco-escala #status-espaco { font-weight: 700; letter-spacing: .04em; color: var(--cad-texto); }
.cad-status-escala { color: var(--cad-texto-sec); }
#status-medida { color: var(--cad-texto-sec); }
/* Fase FILLET-HARDENING-01 -- causa raiz real do bug de Fillet reportado ("clique na 2ª
   linha não funciona, depende de orientação"): textos LONGOS em qualquer filho de texto de
   `.editor-statusbar` (achado ao vivo: `#status-medida`, ex. "Clique na segunda linha (a
   que compartilha o canto com a primeira, em laranja)."; e, em CASCATA depois de corrigir
   só aquele, também `#status-coords`, sem NENHUMA regra própria antes desta) quebravam em
   várias linhas mesmo com `flex-wrap:nowrap` no container acima -- são propriedades de
   eixos diferentes: aquela impede os ITENS do flex de quebrarem pra outra LINHA, nenhuma
   delas impede um item individual de quebrar o próprio TEXTO internamente quando o flex o
   encolhe (`flex-shrink` default 1, sem `white-space` própria). Cada item que quebrava
   crescia de altura, arrastando a barra inteira junto (~53px -> até ~123px, medido ao
   vivo) e encolhendo o canvas. Como worldToScreen (src/cad/viewport/transform.ts) usa
   `screenSize.height/2` -- centralizado, não ancorado no topo -- QUALQUER encolhimento do
   canvas desloca o desenho inteiro na tela sem realinhar zoom/pan, fazendo a geometria
   "pular" sob o cursor: uma aresta HORIZONTAL (espessura zero em Y) sai do alcance de
   clique nesse deslocamento vertical, uma aresta VERTICAL tolera (mesma linha, só desloca
   ao longo dela) -- exatamente o "depende da orientação" relatado. Corrigido na raiz,
   pro elemento inteiro (não item por item, que só re-descobriria o próximo filho de texto
   em cascata) -- nenhum filho de texto da barra de status jamais quebra linha; excesso
   sempre rola horizontalmente (`overflow-x:auto` já existente acima), nunca cresce de
   altura. Ver relatório da fase pra causa raiz completa. */
.editor-statusbar > * { white-space: nowrap; flex-shrink: 0; }

.toggle-status {
    padding: 4px 10px; border-radius: 4px; border: 1px solid var(--cad-borda); background: transparent; color: var(--cad-texto-sec);
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; cursor: pointer;
}
.toggle-status:hover { border-color: var(--cad-texto-desab); color: var(--cad-texto); }
.toggle-status.ativo { background: var(--cad-azul); border-color: var(--cad-azul); color: #fff; }

.osnap-flyout-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
#btn-osnap-flyout { display: inline-flex; align-items: center; gap: 3px; }
.osnap-flyout {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; z-index: 30; min-width: 380px;
    background: var(--cad-painel); border: 1px solid var(--cad-borda); border-radius: 8px; padding: 12px;
    flex-direction: column; gap: 8px; box-shadow: 0 -10px 28px rgba(0,0,0,.5);
}
/* "display: flex" só entra quando NÃO está hidden — antes disso ele sobrepunha o atributo
   hidden do HTML (mesma especificidade do [hidden] do user-agent, e vinha depois na cascata),
   deixando o flyout sempre visível não importa o que o JS fizesse com .hidden. */
.osnap-flyout:not([hidden]) { display: flex; }
.osnap-flyout-titulo { font-size: .7rem; font-weight: 700; color: var(--cad-texto-sec); text-transform: uppercase; letter-spacing: .05em; }
.osnap-flyout-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.toggle-snap-tipo {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 6px;
    background: var(--cad-campo); border: 1px solid transparent; color: var(--cad-texto-sec); font-size: .68rem; cursor: pointer;
}
.toggle-snap-tipo:hover { border-color: var(--cad-borda); color: var(--cad-texto); }
.toggle-snap-tipo.ativo { background: var(--cad-azul); color: #fff; }
.toggle-snap-tipo:disabled { opacity: .45; cursor: not-allowed; }
.toggle-snap-tipo:disabled:hover { border-color: transparent; color: var(--cad-texto-sec); }

/* Fase DRAFTING-HOTFIX-02 — position:fixed (não absolute): `.entrada-flutuante` é
   posicionada em cursor+16px (JS, atualizarPosicaoEntradaFlutuante em desenho-editor.js) e
   tem ~225px de largura própria (rótulo+input) -- perto da borda direita/inferior do canvas
   isso ultrapassava os limites de `#canvas-wrap` (containing block de position:absolute, com
   overflow:hidden), tornando-o PROGRAMATICAMENTE rolável (scrollWidth > clientWidth, mesmo
   sem barra de rolagem visível). `.focus()` no input recém-criado (mostrarEntradaFlutuante)
   então disparava o scroll-into-view padrão do navegador NESSE container -- e como o
   <canvas> é IRMÃO da entrada flutuante dentro do mesmo `#canvas-wrap`, rolar o container
   deslocava a posição renderizada do canvas junto (confirmado ao vivo: scrollLeft saltando
   de 0 pra ~187px, canvas.getBoundingClientRect().left mudando na mesma proporção),
   corrompendo silenciosamente a conversão screen->world de cliques seguintes. position:fixed
   tira `.entrada-flutuante` do cálculo de overflow-de-conteúdo de QUALQUER ancestral (nunca
   é "rolável para dentro de vista" por focus/scrollIntoView de ninguém) -- mesma técnica já
   usada em `.cad-menu-dropdown` (Fase UI-HOTFIX-01). JS agora soma o retângulo do próprio
   canvas (viewport-relative) às coordenadas antes canvas-relative, ver
   atualizarPosicaoEntradaFlutuante. */
.entrada-flutuante {
    position: fixed; z-index: 5; background: var(--cad-painel); color: var(--cad-texto); border: 1px solid var(--cad-borda); border-radius: 6px;
    padding: 6px 8px; gap: 8px; align-items: center; font-size: .78rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); pointer-events: auto;
}
/* Mesma pegadinha do osnap-flyout: "display: flex" incondicional sobrepõe o atributo
   hidden do HTML (mesma especificidade, vem depois na cascata) — sem isso a caixinha
   flutuante (vazia, sem os campos) ficava sempre visível como um retângulo fantasma
   grudado na última posição do cursor, mesmo escondida via JS. */
.entrada-flutuante:not([hidden]) { display: flex; }
.entrada-flutuante label { font-size: .68rem; color: var(--cad-texto-sec); white-space: nowrap; margin: 0; }
.entrada-flutuante input {
    width: 64px; padding: 4px 6px; border: 1px solid var(--cad-borda); border-radius: 4px; background: var(--cad-campo); color: var(--cad-texto); font-size: .78rem;
}
/* Fase COMMAND-UX-02D, Parte E, seção 6 -- Círculo mostra Ø e Raio juntos (os dois sempre
   válidos, um derivado do outro) sem badge azul extra; em vez de duplicar a info em texto,
   o campo que corresponde ao modo de entrada atual (RAIO/[Diâmetro] digitado na linha de
   comando -- ver estado.circuloModoEntrada) ganha destaque sutil de borda, sinalizando qual
   dos dois é "o que o usuário está preenchendo" sem esconder o outro (ele continua clicável/
   editável, só não é o foco visual). */
.entrada-flutuante input.campo-flutuante-primario { border-color: var(--cad-azul); }

/* Fase COMMAND-UX-02, seção 1/2 -- tooltip de prompt contextual perto do cursor, mesma
   técnica position:fixed de .entrada-flutuante (ver DRAFTING-HOTFIX-02 acima) e mesmo motivo
   (nunca deixar o focus/posicionamento de um dos dois disparar scroll-into-view em nenhum
   ancestral). Fica ACIMA de onde .entrada-flutuante apareceria (JS: mesmo X, Y menor) -- os
   dois nunca se sobrepõem, e o rótulo de tipo de snap (canvas, dy:-38 no array `rotulos` de
   desenhar()) fica ainda mais acima, sobre o desenho -- 3 camadas empilhadas sem colidir. */
.prompt-flutuante {
    position: fixed; z-index: 6; background: var(--cad-painel); color: var(--cad-texto); border: 1px solid var(--cad-borda); border-radius: 6px;
    padding: 4px 9px; font-size: .74rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.4); pointer-events: none;
}
.prompt-flutuante:not([hidden]) { display: block; }

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

.cad-painel { flex-shrink: 0; width: 300px; display: flex; flex-direction: column; min-height: 0; background: var(--cad-painel); border-left: 1px solid var(--cad-borda); }
/* Fase UI-CAD-03C, seção 4/5 -- o botão "Propriedades" da Ribbon agora abre/fecha o PAINEL
   INTEIRO (as 4 abas -- Propriedades/Camadas/Blocos/Layout -- continuam existindo, só o
   container some junto), não mais só o sub-bloco de campos da entidade selecionada (que
   nunca mexia na largura do canvas). .cad-canvas-area é flex irmã de .cad-painel dentro de
   .cad-corpo (display:flex) -- escondendo .cad-painel, o canvas RECUPERA os 300px de verdade,
   mesmo mecanismo já usado pra Ribbon/barra lateral/réguas/topbar nesta fase. */
.cad-app.cad-painel-direito-oculto .cad-painel { display: none; }
.cad-painel-abas { flex-shrink: 0; display: flex; border-bottom: 1px solid var(--cad-borda); }
.cad-painel-aba {
    flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--cad-texto-sec);
    padding: 11px 6px; cursor: pointer; font-size: .8rem; font-weight: 600;
}
.cad-painel-aba:hover { color: var(--cad-texto); }
.cad-painel-aba-ativa { color: var(--cad-texto); border-bottom-color: var(--cad-azul); }
.cad-painel-corpo { flex: 1; overflow-y: auto; padding: 14px; }

.cad-painel-secao { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cad-borda); }
.cad-painel-secao:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.cad-painel-secao-titulo {
    font-size: .68rem; font-weight: 700; color: var(--cad-texto-desab); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 10px;
}
.cad-painel-secao-titulo-flex { display: flex; align-items: center; justify-content: space-between; }
.cad-painel-linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cad-campo-inline { width: 46px; padding: 4px 5px; text-align: center; font-size: .78rem; margin: 0 4px; display: inline-block; }
.cad-check-linha, .cad-snap-grade label {
    display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 400; color: var(--cad-texto);
    margin: 0 0 8px; white-space: nowrap;
}
.cad-snap-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.cad-snap-grade label { margin-bottom: 6px; }

.cad-toggle-linha { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 400; color: var(--cad-texto); margin: 0 0 12px; }
.cad-toggle {
    position: relative; width: 34px; height: 19px; border-radius: 999px; border: none; background: var(--cad-campo);
    cursor: pointer; padding: 0; flex-shrink: 0;
}
.cad-toggle-bolinha { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--cad-texto-sec); transition: left .12s ease; }
.cad-toggle.ativo { background: var(--cad-azul); }
.cad-toggle.ativo .cad-toggle-bolinha { left: 17px; background: #fff; }

.cad-link-btn { background: none; border: none; color: var(--cad-azul-hover); font-size: .74rem; font-weight: 600; cursor: pointer; padding: 0; }
.cad-link-btn:hover { text-decoration: underline; }
.cad-link-btn:disabled { color: var(--cad-texto-desab); cursor: not-allowed; text-decoration: none; }

.cad-camadas-lista { list-style: none; margin: 0; padding: 0; }
.cad-camadas-lista li { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: .8rem; border-bottom: 1px solid var(--cad-borda); }
.cad-camadas-lista li:last-child { border-bottom: none; }
.cad-camada-cor { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); }
.cad-camada-nome { color: var(--cad-texto); }
.cad-camadas-lista-grande li { padding: 9px 2px; }

.campo-propriedade { margin-bottom: 10px; }
.campo-propriedade label { margin: 0 0 3px; font-size: .78rem; }
.campo-somente-leitura {
    padding: 8px 10px; border: 1px solid var(--cad-borda); border-radius: 5px;
    background: var(--cad-campo); color: var(--cad-texto-sec); font-size: .88rem;
}

/* ---------------- Layout de impressão (folha + viewports) ---------------- */

.cad-layout-vp-card {
    border: 1px solid var(--cad-borda); border-radius: 6px; padding: 10px; margin-bottom: 10px; background: var(--cad-campo);
}
.cad-layout-vp-card label { margin: 10px 0 3px; font-size: .74rem; }
.cad-layout-vp-card label:first-child { margin-top: 0; }
.cad-layout-vp-titulo {
    display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--cad-texto);
}
.cad-layout-vp-escala-personalizada { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cad-layout-vp-escala-personalizada span { font-size: .8rem; color: var(--cad-texto-sec); }
.cad-layout-vp-escala-personalizada input { flex: 1; min-width: 0; }