@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary:        #0a0b69;
    --primary-hover:  #0c0d82;
    --primary-light:  #1518a0;
    --primary-pale:   #eef0fb;
    --secondary:      #f92e78;
    --secondary-hover:#e0265e;

    --text-dark:  #0f1023;
    --text-body:  #3d4060;
    --text-muted: #9499b8;
    --text-light: #ffffff;

    --bg-body:   #eceef8;
    --bg-card:   rgba(255,255,255,0.70);
    --bg-subtle: rgba(247,248,253,0.80);

    --green:        #16a34a;
    --green-bg:     #f0fdf4;
    --green-border: #bbf7d0;
    --green-text:   #15803d;

    --amber:        #c47b0a;
    --amber-bg:     #fefce8;
    --amber-border: #fde68a;
    --amber-text:   #854d0e;

    --blue:        #2a5bd7;
    --blue-bg:     #eff3ff;
    --blue-border: #bfcffb;
    --blue-text:   #1d3fa8;

    --red:        #dc2626;
    --red-bg:     #fef2f2;
    --red-border: #fecaca;
    --red-text:   #b91c1c;

    --border:        rgba(10, 11, 105, 0.08);
    --border-strong: rgba(10, 11, 105, 0.13);

    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   14px;
    --radius-full: 9999px;

    --glass-bg:     rgba(255,255,255,0.60);
    --glass-border: rgba(255,255,255,0.50);
    --glass-blur:   blur(20px) saturate(180%);

    --shadow-xs: 0 1px 3px rgba(10,11,105,0.05);
    --shadow-sm: 0 2px 12px rgba(10,11,105,0.06), 0 1px 3px rgba(10,11,105,0.04);
    --shadow:    0 4px 24px rgba(10,11,105,0.08), 0 1px 6px rgba(10,11,105,0.04);
    --shadow-md: 0 8px 36px rgba(10,11,105,0.10), 0 2px 10px rgba(10,11,105,0.05);

    --sidebar-width: 232px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

/* ─── BACKGROUND ORBS ─────────────────────────────────────── */
html {
    min-height: 100vh;
    background: linear-gradient(145deg, #eceef8 0%, #e4e6f4 50%, #eceefa 100%);
}

html::before {
    content: '';
    position: fixed;
    width: 900px; height: 900px;
    top: -320px; right: -180px;
    background: radial-gradient(circle at 50% 50%, rgba(10,11,105,0.10) 0%, rgba(10,11,105,0.03) 45%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

html::after {
    content: '';
    position: fixed;
    width: 750px; height: 750px;
    bottom: -220px; left: -80px;
    background: radial-gradient(circle at 50% 50%, rgba(249,46,120,0.08) 0%, rgba(249,46,120,0.02) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-body);
    min-height: 100vh;
    display: flex;
    position: relative;
    z-index: 1;
}

/* Terceiro orb — centro-direita */
body::before {
    content: '';
    position: fixed;
    width: 500px; height: 500px;
    top: 40%; right: 15%;
    background: radial-gradient(circle, rgba(21,24,160,0.05) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideModal {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.section, .card, .scorecard-main { animation: fadeUp .3s ease both; }
.scorecard-card { animation: fadeUp .3s ease both; }
.scorecard-card:nth-child(1) { animation-delay: .05s; }
.scorecard-card:nth-child(2) { animation-delay: .10s; }
.scorecard-card:nth-child(3) { animation-delay: .15s; }
.scorecard-card:nth-child(4) { animation-delay: .20s; }
.cliente-card   { animation: fadeUp .25s ease both; }
.trimestre-card { animation: fadeUp .25s ease both; }
.trimestre-card:nth-child(1) { animation-delay: .04s; }
.trimestre-card:nth-child(2) { animation-delay: .08s; }
.trimestre-card:nth-child(3) { animation-delay: .12s; }
.trimestre-card:nth-child(4) { animation-delay: .16s; }

/* ─── GLASSMORPHISM MIXIN ─────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* ─── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: linear-gradient(
        168deg,
        #08096b 0%,
        #0b0d84 28%,
        #0d0f92 55%,
        #09096e 80%,
        #060760 100%
    );
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow-y: auto;
    box-shadow: 3px 0 30px rgba(8,9,107,0.24);
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02), rgba(255,255,255,0.07));
}

.sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}
.sidebar-logo {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: -.2px;
}
.sidebar-tagline {
    font-size: 9.5px;
    color: rgba(255,255,255,.30);
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.sidebar-section-label {
    padding: 18px 20px 6px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.22);
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.sidebar-nav { padding: 6px 10px; flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.60);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background .14s, color .14s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    margin-bottom: 2px;
    letter-spacing: -.1px;
}
.nav-item:hover  { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active {
    background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav-item.disabled { opacity: .25; pointer-events: none; }

.nav-icon {
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    flex-shrink: 0;
}
.nav-item.active .nav-icon { opacity: 1; }

.sidebar-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 10px; }

.sidebar-cliente-badge {
    margin: 8px 10px 0;
    padding: 9px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-sm);
}
.sidebar-cliente-badge .label { font-size: 9px; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .8px; }
.sidebar-cliente-badge .nome  { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-item-refresh {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 13px; border-radius: var(--radius-sm);
    color: rgba(255,255,255,.46); font-size: 12.5px; font-weight: 600; font-family: var(--font);
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
    width: calc(100% - 20px); margin: 6px 10px 2px;
    cursor: pointer; transition: background .14s, color .14s;
}
.nav-item-refresh:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item-refresh.spinning .refresh-icon { animation: spin .6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.interaction-bar { margin: 4px 10px 10px; height: 2px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.interaction-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), #ff6ba0); border-radius: 2px; transition: width .2s; }

/* ─── MAIN LAYOUT ─────────────────────────────────────────── */
.layout-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.topbar {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.55);
    padding: 0 26px;
    height: 54px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(10,11,105,0.04);
}
.topbar-left  { display: flex; align-items: center; gap: 6px; }
.topbar-title { font-size: 15px; font-weight: 700; color: var(--text-dark); letter-spacing: -.2px; }
.topbar-sub   { font-size: 13px; color: var(--text-muted); }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.container { padding: 24px 26px 48px; width: 100%; }

/* ─── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: .35; }

/* ─── GLASS CARDS ─────────────────────────────────────────── */
.section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8);
    margin-bottom: 18px;
    overflow: hidden;
}

.section-header {
    background: linear-gradient(90deg, var(--primary) 0%, #1214a2 60%, var(--primary-light) 100%);
    padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.section-header h2 {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.92);
    text-transform: uppercase; letter-spacing: .8px;
}

.tab-section-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px;
    background: rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.40);
}
.tab-section-actions .cat-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .7px;
}

.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8);
    padding: 20px;
}

.page-header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.page-title  { font-size: 22px; font-weight: 800; color: var(--text-dark); letter-spacing: -.4px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ─── TABELAS ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }

thead th {
    background: rgba(10,11,105,0.04);
    color: var(--primary);
    padding: 9px 12px;
    text-align: left; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
    border-bottom: 1px solid var(--border-strong);
}

tbody tr { border-bottom: 1px solid rgba(10,11,105,0.05); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(10,11,105,0.03) !important; }
tbody tr:nth-child(even) { background: rgba(10,11,105,0.015); }
tbody td { padding: 8px 12px; vertical-align: middle; color: var(--text-body); }

tfoot td {
    padding: 9px 12px;
    background: rgba(10,11,105,0.03);
    border-top: 1px solid var(--border-strong);
    font-size: 12.5px; font-weight: 700; color: var(--text-dark);
}

/* ─── EDIÇÃO INLINE ───────────────────────────────────────── */
.editable {
    display: inline-block; min-width: 36px;
    padding: 3px 5px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: text;
    transition: border-color .13s, background .13s;
}
.editable:hover { border-color: rgba(10,11,105,0.12); background: rgba(255,255,255,0.7); }

.inline-input {
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm); padding: 3px 7px;
    font-size: 13px; font-family: var(--font);
    background: #fff; color: var(--text-dark); outline: none;
    box-shadow: 0 0 0 3px rgba(10,11,105,0.07);
}
.save-flash { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important; }

/* ─── DROPDOWNS DE PROGRESSO ──────────────────────────────── */
.select-progresso {
    -webkit-appearance: none; appearance: none;
    padding: 5px 28px 5px 11px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: 12px; font-weight: 600; font-family: var(--font);
    cursor: pointer; outline: none; min-width: 148px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 9px;
    transition: filter .12s, box-shadow .12s; letter-spacing: -.1px;
}
.select-progresso:hover  { filter: brightness(.94); }
.select-progresso:focus  { box-shadow: 0 0 0 2px rgba(10,11,105,.09); }

.status-concluido    { background-color: var(--green-bg);   color: var(--green-text); border-color: var(--green-border); }
.status-quase        { background-color: var(--amber-bg);   color: var(--amber-text); border-color: var(--amber-border); }
.status-avancado     { background-color: var(--blue-bg);    color: var(--blue-text);  border-color: var(--blue-border); }
.status-inicial      { background-color: rgba(247,248,253,0.9); color: var(--text-body); border-color: var(--border-strong); }
.status-nao-iniciado { background-color: var(--red-bg);     color: var(--red-text);   border-color: var(--red-border); }

/* ─── BADGES ──────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge-verde    { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-border); }
.badge-vermelho { background: var(--red-bg);   color: var(--red-text);   border: 1px solid var(--red-border); }
.badge-cinza    { background: rgba(247,248,253,0.9); color: var(--text-muted); border: 1px solid var(--border); }
.badge-primario { background: var(--primary-pale); color: var(--primary); border: 1px solid rgba(10,11,105,.12); }
.badge-amber    { background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber-border); }

/* ─── BOTÃO OBSERVAÇÃO ────────────────────────────────────── */
.btn-obs {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid rgba(10,11,105,0.10); background: rgba(255,255,255,0.6);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .13s, border-color .13s; color: var(--text-muted);
}
.btn-obs:hover   { background: var(--primary-pale); border-color: rgba(10,11,105,.18); color: var(--primary); }
.btn-obs.has-obs { border-color: rgba(10,11,105,.20); background: var(--primary-pale); color: var(--primary); }
.btn-obs svg { display: block; }

/* ─── BOTÕES ──────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 16px; border-radius: var(--radius); border: none;
    font-size: 13px; font-family: var(--font); cursor: pointer; font-weight: 600;
    text-decoration: none; transition: filter .14s, box-shadow .14s;
    white-space: nowrap; line-height: 1; letter-spacing: -.1px;
}
.btn:active { transform: scale(.98); }

.btn-primary {
    background: linear-gradient(135deg, #0a0b69 0%, #1518a0 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(10,11,105,.22);
}
.btn-primary:hover { filter: brightness(1.10); box-shadow: 0 3px 12px rgba(10,11,105,.28); }

.btn-secondary {
    background: linear-gradient(135deg, #f92e78 0%, #e6266c 100%);
    color: #fff; box-shadow: 0 1px 4px rgba(249,46,120,.20);
}
.btn-secondary:hover { filter: brightness(1.07); }

.btn-outline-danger { background: transparent; color: var(--red); border: 1px solid var(--red-border); }
.btn-outline-danger:hover { background: var(--red-bg); }

.btn-outline { background: rgba(255,255,255,.5); color: var(--primary); border: 1px solid rgba(10,11,105,.14); backdrop-filter: blur(8px); }
.btn-outline:hover { background: var(--primary-pale); }

.btn-ghost  { background: rgba(255,255,255,.5); color: var(--text-muted); border: 1px solid rgba(10,11,105,.09); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.75); color: var(--text-dark); }

.btn-sm   { padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-icon { padding: 5px 9px; font-size: 13px; line-height: 1; border-radius: var(--radius-sm); }

.btn-light {
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.16); padding: 6px 13px;
    border-radius: var(--radius); font-size: 12.5px; font-weight: 600; font-family: var(--font);
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px; transition: background .13s;
}
.btn-light:hover { background: rgba(255,255,255,.20); }

/* ─── BARRA DE PROGRESSO ──────────────────────────────────── */
.progress-bar-wrap {
    background: rgba(10,11,105,0.07);
    border-radius: var(--radius-full); height: 7px; overflow: hidden; width: 100%;
}
.progress-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width .5s ease; }

/* Verde = boa execução */
.progress-verde    { background: linear-gradient(90deg, #16a34a, #22c55e); }
/* Rosa/primário = em progresso (sem vermelho) */
.progress-amarelo  { background: linear-gradient(90deg, var(--primary), #1518a0); }
/* Rosa vivo = abaixo da meta (evita o alarmismo do vermelho) */
.progress-vermelho { background: linear-gradient(90deg, #e0265e, #f92e78); }

/* ─── FORMULÁRIOS ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; }

.form-control {
    border: 1px solid rgba(10,11,105,0.12); border-radius: var(--radius);
    padding: 8px 12px; font-size: 13.5px; font-family: var(--font);
    background: rgba(255,255,255,0.75); color: var(--text-dark); outline: none;
    transition: border-color .14s, box-shadow .14s; backdrop-filter: blur(8px);
}
.form-control:focus { border-color: rgba(10,11,105,.28); box-shadow: 0 0 0 3px rgba(10,11,105,.07); }
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 80px; }

/* ─── MODAL ───────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(8,9,70,.32);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; animation: fadeIn .15s ease;
}
.modal {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(8,9,70,.16), 0 4px 16px rgba(8,9,70,.08), inset 0 1px 0 rgba(255,255,255,.9);
    padding: 28px 30px; min-width: 380px; max-width: 520px; width: 100%;
    animation: slideModal .2s ease; border: 1px solid rgba(255,255,255,0.60);
}
.modal h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); letter-spacing: -.3px; margin-bottom: 18px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ─── MENSAGENS ───────────────────────────────────────────── */
.msg-empty   { color: var(--text-muted); font-style: italic; padding: 20px 12px; text-align: center; font-size: 13px; }
.msg-error   { background: var(--red-bg);   color: var(--red-text);   border: 1px solid var(--red-border);   border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.msg-success { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.loading     { text-align: center; padding: 48px; color: var(--text-muted); font-size: 13px; }

/* ─── INDEX: CLIENTES — CARD FULL COVER ─────────────────────── */
.clientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
}

/* Wrapper: card + nome abaixo */
.cliente-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    animation: fadeUp .25s ease both;
}

.cliente-card {
    width: 100%;
    height: 170px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7);
    cursor: pointer;
    transition: box-shadow .17s, transform .17s, border-color .17s;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* Fallback background (inicial) */
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-light) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cliente-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(255,255,255,0.80); }

/* Inicial centralizada quando sem logo */
.cliente-card-initials {
    font-size: 58px; font-weight: 800;
    color: rgba(255,255,255,0.88); letter-spacing: -3px;
    user-select: none;
}

/* Overlay escuro sutil nos cantos para dar profundidade quando tem logo */
.cliente-card.has-logo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.14) 100%);
    pointer-events: none;
}

/* Botões de ação */
.cliente-card-actions {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 3px; opacity: 0; transition: opacity .14s;
    z-index: 3;
}
.cliente-card:hover .cliente-card-actions { opacity: 1; }

.btn-card-action {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.7);
    cursor: pointer; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 13px; line-height: 1;
    transition: background .13s; box-shadow: var(--shadow-xs);
}
.btn-edit-cliente { color: var(--primary); }
.btn-edit-cliente:hover { background: var(--primary-pale); }
.btn-del-cliente  { color: var(--red); }
.btn-del-cliente:hover { background: var(--red-bg); }

/* Nome abaixo do card */
.cliente-nome {
    font-weight: 700; font-size: 13px; color: var(--text-dark);
    text-align: center; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Card "novo cliente" — mesmo tamanho, posição coerente */
.cliente-item-novo { animation: fadeUp .25s ease both; }

.cliente-card-novo {
    width: 100%; height: 170px;
    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1.5px dashed rgba(10,11,105,0.14);
    color: var(--text-muted); display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; border-radius: var(--radius-lg);
    transition: border-color .14s, background .14s, color .14s; gap: 6px;
}
.cliente-card-novo:hover { border-color: rgba(10,11,105,.28); background: rgba(238,240,251,.6); color: var(--primary); }
.cliente-card-novo .plus { font-size: 28px; font-weight: 300; line-height: 1; }
.cliente-card-novo .plus-label { font-size: 13px; font-weight: 600; }

/* ─── LOGO UPLOAD ─────────────────────────────────────────── */
.logo-upload-area {
    border: 1px dashed rgba(10,11,105,.15); border-radius: var(--radius);
    padding: 20px; text-align: center; cursor: pointer;
    transition: border-color .14s, background .14s;
    min-height: 80px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px; background: rgba(255,255,255,0.5);
}
.logo-upload-area:hover { border-color: rgba(10,11,105,.28); background: var(--primary-pale); }
.logo-upload-area img { max-height: 60px; max-width: 120px; object-fit: contain; border-radius: 6px; }
.logo-upload-text { font-size: 12.5px; color: var(--text-muted); }

/* ─── ANO SELECTOR ────────────────────────────────────────── */
.ano-selector {
    display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    padding: 12px 18px; border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.8);
}
.ano-selector label { font-weight: 700; color: var(--text-dark); font-size: 13px; white-space: nowrap; }

/* ─── TRIMESTRES GRID ─────────────────────────────────────── */
.trimestres-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px; }

.trimestre-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 18px 20px; cursor: pointer;
    transition: box-shadow .17s, border-color .17s, transform .17s;
    text-decoration: none; color: inherit; display: block;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8);
}
.trimestre-card:hover { box-shadow: var(--shadow-md); border-color: rgba(255,255,255,.75); transform: translateY(-2px); }

.q-num   { font-size: 24px; font-weight: 800; color: var(--primary); letter-spacing: -.5px; margin-bottom: 3px; }
.q-tema  { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; min-height: 19px; }
.q-score-label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; display: flex; justify-content: space-between; font-weight: 700; }

/* ─── TABS ────────────────────────────────────────────────── */
.tabs {
    display: flex;
    background: linear-gradient(90deg, var(--primary) 0%, #1214a2 60%, var(--primary-light) 100%);
    padding: 0 16px; overflow-x: auto;
}
.tab-btn {
    padding: 12px 20px; border: none; background: none; cursor: pointer;
    font-size: 13px; font-family: var(--font); color: rgba(255,255,255,0.58); font-weight: 600;
    border-bottom: 2.5px solid transparent; margin-bottom: 0;
    transition: color .14s, border-color .14s; white-space: nowrap;
}
.tab-btn:hover { color: rgba(255,255,255,0.85); }
.tab-btn.active { color: #fff; border-bottom-color: var(--secondary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── TRIMESTRE INFO BAR ──────────────────────────────────── */
.trimestre-info-bar {
    background: linear-gradient(135deg, #08096b 0%, #0c0e88 45%, #0d1094 70%, #09096e 100%);
    border-radius: var(--radius-lg); padding: 17px 20px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 24px rgba(8,9,107,.2), inset 0 1px 0 rgba(255,255,255,.08);
    animation: fadeUp .25s ease both;
}
.trimestre-info-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.trimestre-qtag { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.4px; white-space: nowrap; }
.trimestre-tema-group { display: flex; flex-direction: column; gap: 3px; }
.trimestre-info-bar label { font-size: 9px; color: rgba(255,255,255,.32); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.tema-inline {
    border: none; border-bottom: 1px solid rgba(255,255,255,.16);
    background: transparent; color: #fff;
    font-size: 13.5px; font-weight: 600; font-family: var(--font);
    padding: 2px 4px; outline: none; min-width: 180px; transition: border-color .13s;
}
.tema-inline::placeholder { color: rgba(255,255,255,.25); }
.tema-inline:focus { border-bottom-color: rgba(255,255,255,.6); }
.trimestre-info-right { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }

/* ─── NUMERO CRITICO ──────────────────────────────────────── */
.nc-inline {
    border: 1px solid rgba(10,11,105,0.10); border-radius: var(--radius);
    padding: 7px 12px; font-size: 13px; font-family: var(--font);
    background: rgba(255,255,255,0.70); color: var(--text-dark);
    outline: none; width: 100%; transition: border-color .14s, box-shadow .14s;
    backdrop-filter: blur(8px);
}
.nc-inline:focus { border-color: rgba(10,11,105,.22); box-shadow: 0 0 0 3px rgba(10,11,105,.07); }

/* ─── SCORECARD ───────────────────────────────────────────── */
.scorecard-main {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.85);
    padding: 40px 36px 36px; text-align: center; margin-bottom: 20px;
}
.score-percent { font-size: 58px; font-weight: 800; letter-spacing: -2px; line-height: 1; margin: 10px 0 18px; }
.score-verde   { color: var(--green); }
.score-amarelo { color: var(--primary); }
.score-vermelho{ color: var(--secondary); }
.score-label   { font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 4px; }

.scorecard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }

.scorecard-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.85);
    padding: 18px 18px 16px; border-left: 3px solid var(--primary);
}
.scorecard-card.verde   { border-left-color: var(--green); }
.scorecard-card.amarelo { border-left-color: var(--primary); }
.scorecard-card.vermelho{ border-left-color: var(--secondary); }
.scorecard-card-title { font-size: 10.5px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.scorecard-card-peso  { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.scorecard-cat-pct { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1; margin-bottom: 10px; }
.scorecard-card.verde   .scorecard-cat-pct { color: var(--green); }
.scorecard-card.amarelo .scorecard-cat-pct { color: var(--primary); }
.scorecard-card.vermelho .scorecard-cat-pct { color: var(--secondary); }
.scorecard-card:not(.verde):not(.amarelo):not(.vermelho) .scorecard-cat-pct { color: var(--primary); }

/* Subtotal linha azul sólida — imune ao hover */
.subtotal-row,
.subtotal-row:hover { background: linear-gradient(90deg, var(--primary) 0%, #1214a2 60%, var(--primary-light) 100%) !important; }
.subtotal-row td,
.subtotal-row:hover td { color: #fff !important; font-weight: 700; padding: 9px 12px; }

/* ─── CONFIGURAÇÕES ───────────────────────────────────────── */
.config-section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
    margin-bottom: 14px; overflow: hidden;
}
.config-section-header {
    background: rgba(255,255,255,.25); padding: 11px 18px;
    font-size: 10.5px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: .7px;
    border-bottom: 1px solid rgba(255,255,255,.40);
}
.config-section-body { padding: 16px 18px; }

/* ─── PONTOS CELL ─────────────────────────────────────────── */
.pts-cell     { font-weight: 700; white-space: nowrap; font-size: 12.5px; }
.pts-verde    { color: var(--green); }
.pts-amarelo  { color: var(--primary); }
.pts-vermelho { color: var(--secondary); }

/* ─── RICH TEXT EDITOR ────────────────────────────────────── */
.modal-obs-wide {
    min-width: min(680px, calc(100vw - 48px));
    max-width: min(780px, calc(100vw - 48px));
    width: 100%;
}
.rte-container {
    border: 1px solid rgba(10,11,105,0.10); border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rte-toolbar {
    display: flex; align-items: center; gap: 2px; padding: 7px 10px;
    background: rgba(247,248,253,0.80);
    border-bottom: 1px solid rgba(10,11,105,0.08);
    flex-wrap: wrap; row-gap: 4px; user-select: none;
}
.rte-sep { width: 1px; height: 18px; background: rgba(10,11,105,.12); margin: 0 4px; flex-shrink: 0; }
.rte-btn {
    width: 30px; height: 30px; border: none; background: transparent;
    border-radius: var(--radius-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-family: var(--font); color: var(--text-body);
    transition: background .12s; flex-shrink: 0; padding: 0;
}
.rte-btn:hover    { background: rgba(10,11,105,.07); }
.rte-btn.rte-active { background: var(--primary-pale); color: var(--primary); }
.rte-btn b { font-size: 14px; font-weight: 800; }
.rte-btn i { font-size: 14px; font-style: italic; font-weight: 600; }
.rte-btn u { font-size: 13px; text-decoration: underline; font-weight: 600; }
.rte-select {
    height: 30px; border: 1px solid rgba(10,11,105,0.10); border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.75); font-size: 12px; font-family: var(--font);
    color: var(--text-body); padding: 0 6px; cursor: pointer; outline: none;
    transition: border-color .12s; flex-shrink: 0;
    -webkit-appearance: none; appearance: none;
}
.rte-select:focus { border-color: rgba(10,11,105,.22); }
.rte-font-sel { width: 106px; }
.rte-size-sel { width: 62px; }
.rte-color-wrap {
    position: relative; cursor: pointer; width: 30px; height: 30px;
    border: none; background: transparent; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: background .12s; flex-shrink: 0;
}
.rte-color-wrap:hover { background: rgba(10,11,105,.07); }
.rte-color-dot { width: 16px; height: 16px; border-radius: 50%; background: #111827; border: 1.5px solid rgba(0,0,0,.12); display: block; pointer-events: none; }
.rte-color-wrap input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0; }
.rte-editor {
    min-height: 180px; max-height: 380px; overflow-y: auto;
    padding: 16px 18px; outline: none; font-size: 14px; font-family: var(--font);
    line-height: 1.65; color: var(--text-dark); caret-color: var(--primary); word-break: break-word;
}
.rte-editor:empty::before { content: attr(placeholder); color: var(--text-muted); pointer-events: none; display: block; }
.rte-editor ul, .rte-editor ol { padding-left: 22px; margin: 6px 0; }
.rte-editor li { margin: 3px 0; }
.rte-editor a { color: var(--primary); text-decoration: underline; }

/* ─── DASHBOARD ───────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.kpi-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.85);
    border-left: 4px solid var(--primary);
    animation: fadeUp .25s ease both;
}
.kpi-card.alerta { border-left-color: var(--secondary); }
.kpi-card.bom    { border-left-color: var(--green); }
.kpi-label {
    font-size: 10.5px; font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 8px;
}
.kpi-value {
    font-size: 30px; font-weight: 800;
    color: var(--primary);
    letter-spacing: -1px; line-height: 1;
}
.kpi-card.alerta .kpi-value { color: var(--secondary); }
.kpi-card.bom    .kpi-value { color: var(--green); }
.kpi-sub {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px;
}

.snapshot-list {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.snap-row {
    display: grid;
    grid-template-columns: 1.6fr 1.4fr 2fr 70px 70px;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.snap-row:last-child { border-bottom: none; }
.snap-nome { font-weight: 600; color: var(--text-dark); }
.snap-meta-info { color: var(--text-muted); font-size: 11.5px; }
.snap-bar-wrap {
    height: 8px;
    background: rgba(10,11,105,0.07);
    border-radius: 9999px;
    overflow: hidden;
}
.snap-bar-fill { height: 100%; border-radius: 9999px; transition: width .5s ease; }
.snap-pct { font-weight: 700; text-align: right; font-size: 13.5px; }
.snap-pct.verde    { color: var(--green); }
.snap-pct.vermelho { color: var(--secondary); }
.snap-pct.cinza    { color: var(--text-muted); }
.snap-delta {
    font-size: 11px; font-weight: 600;
    text-align: right; color: var(--text-muted);
    display: flex; align-items: center; justify-content: flex-end; gap: 3px;
}
.snap-delta.up   { color: var(--green); }
.snap-delta.down { color: var(--red); }

.chart-container { padding: 14px 18px 18px; }
.chart-svg-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-svg-wrap svg { display: block; min-width: 600px; }

.chart-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 12px; justify-content: center;
}
.chart-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-body);
    cursor: pointer; user-select: none;
    padding: 3px 8px; border-radius: 9999px;
    transition: opacity .2s, background .2s;
}
.chart-legend-item:hover { background: rgba(10,11,105,.05); }
.chart-legend-item.inactive { opacity: 0.35; }
.chart-legend-item.inactive:hover { opacity: 0.7; }
.chart-legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.chart-legend-hint {
    font-size: 10.5px; color: var(--text-muted);
    margin-top: 6px; text-align: center; font-style: italic;
}

.depto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; padding: 18px;
}
.depto-card {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    border-top: 3px solid var(--primary);
}
.depto-card.verde    { border-top-color: var(--green); }
.depto-card.vermelho { border-top-color: var(--secondary); }
.depto-card.cinza    { border-top-color: var(--text-muted); }
.depto-card-nome  { font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.depto-card-count { font-size: 10.5px; color: var(--text-muted); margin-bottom: 10px; }
.depto-card-pct   {
    font-size: 24px; font-weight: 800; line-height: 1;
    letter-spacing: -.5px; color: var(--primary);
}
.depto-card.verde    .depto-card-pct { color: var(--green); }
.depto-card.vermelho .depto-card-pct { color: var(--secondary); }

@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .snap-row {
        grid-template-columns: 1fr 70px;
        grid-template-rows: auto auto auto;
    }
    .snap-meta-info { grid-column: 1 / -1; }
    .snap-bar-wrap  { grid-column: 1 / -1; }
}

/* ─── INDICADORES (mensal/semanal) ────────────────────────── */
.trend { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; }
.trend-up   { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-muted); }

.cell-status {
    display:flex; flex-direction:column; gap:4px; align-items:flex-start;
}
.cell-status-row {
    display:flex; align-items:center; gap:6px;
}

.mes-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow .17s, border-color .17s, transform .17s;
    text-decoration: none; color: inherit;
    animation: fadeUp .25s ease both;
}
.mes-card:hover { box-shadow: var(--shadow-md); border-color: rgba(255,255,255,.8); transform: translateY(-2px); }
.mes-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,11,105,.12), var(--shadow); }

.mes-card .mes-nome { font-size: 14px; font-weight: 800; color: var(--primary); letter-spacing: -.2px; margin-bottom: 4px; }
.mes-card .mes-stats { font-size: 11px; color: var(--text-muted); line-height: 1.7; }
.mes-card .mes-pill { display:inline-block; padding:1px 7px; border-radius: var(--radius-full); font-size:10px; font-weight:700; margin-right:4px; }
.mes-card .pill-verde    { background: var(--green-bg); color: var(--green-text); }
.mes-card .pill-vermelho { background: var(--red-bg);   color: var(--red-text); }
.mes-card .pill-cinza    { background: var(--bg-subtle); color: var(--text-muted); }

.meses-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; }
@media (max-width: 1024px) { .meses-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .meses-grid { grid-template-columns: repeat(2, 1fr); } }

.semanal-cel {
    min-width: 180px;
    vertical-align: top !important;
    padding: 10px 8px !important;
}

/* ─── Cell Card (semanal v2) ──────────────────────────────── */
.sem-cell-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sem-cell-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.sem-section-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.sem-cell-card-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sem-realizado-box {
    padding: 9px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    transition: all .14s;
    user-select: none;
}

.sem-realizado-box.empty {
    border: 1.5px dashed rgba(249,46,120,0.40);
    background: rgba(249,46,120,0.04);
    color: var(--secondary);
    font-size: 11.5px;
    cursor: pointer;
}
.sem-realizado-box.empty:hover {
    background: rgba(249,46,120,0.10);
    border-color: var(--secondary);
}

.sem-realizado-box.filled {
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.85);
    color: var(--text-dark);
    font-size: 14px;
    letter-spacing: -.1px;
    cursor: text;
}
.sem-realizado-box.filled:hover {
    border-color: rgba(10,11,105,0.30);
    background: rgba(255,255,255,0.96);
}

.sem-cell-card-info {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sem-info-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.sem-info-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 40px;
}

.sem-cell-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px 8px;
    font-size: 11.5px;
}

.analise-grid {
    display:grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px;
}
@media (max-width: 768px) { .analise-grid { grid-template-columns: 1fr; } }

.analise-textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font);
    background: rgba(255,255,255,0.7);
    color: var(--text-dark);
    resize: vertical;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.analise-textarea:focus {
    border-color: rgba(10,11,105,.25);
    box-shadow: 0 0 0 3px rgba(10,11,105,.08);
}

/* ─── MODAL LEGENDA ───────────────────────────────────────── */
.modal-legenda-wide {
    min-width: min(860px, calc(100vw - 32px));
    max-width: min(960px, calc(100vw - 32px));
    width: 100%;
    max-height: 90vh;
}

/* ─── HAMBURGER BUTTON ────────────────────────────────────── */
.btn-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    border-radius: var(--radius-sm); color: var(--text-body);
    transition: background .13s; margin-right: 4px; flex-shrink: 0;
}
.btn-hamburger:hover { background: var(--bg-subtle); }

/* ─── SIDEBAR BACKDROP (mobile) ──────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,9,70,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    animation: fadeIn .2s ease;
}
.sidebar-backdrop.open { display: block; }

/* ─── RESPONSIVE: TABLET (≤ 1024px) ──────────────────────── */
@media (max-width: 1024px) {
    .btn-hamburger { display: flex; }

    /* Sidebar em modo overlay */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 48px rgba(8,9,107,.3);
    }

    /* Conteúdo sem margem lateral */
    .layout-main { margin-left: 0; }

    /* Grids */
    .scorecard-grid     { grid-template-columns: repeat(2, 1fr); }
    .trimestres-grid    { grid-template-columns: repeat(2, 1fr); }

    /* Tabelas com scroll horizontal */
    .section { overflow-x: auto !important; }
    table    { min-width: 680px; }

    /* Container */
    .container { padding: 20px 20px 40px; }

    /* Modal legenda */
    .modal-legenda-wide { min-width: unset; width: calc(100vw - 32px); }
}

/* ─── RESPONSIVE: MOBILE (≤ 640px) ───────────────────────── */
@media (max-width: 640px) {
    /* Topbar */
    .topbar { padding: 0 14px; height: 50px; }
    .topbar-title { font-size: 13px; letter-spacing: -.1px; }
    .topbar-sub   { display: none; }
    .topbar-right .btn { font-size: 11px; padding: 4px 9px; }

    /* Container */
    .container { padding: 16px 14px 48px; }

    /* Grids para 1 coluna */
    .scorecard-grid  { grid-template-columns: 1fr; gap: 10px; }
    .trimestres-grid { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
    .clientes-grid   { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

    /* Cliente cards menores */
    .cliente-card { height: 140px; }
    .cliente-card-novo { height: 140px; }

    /* Scorecard */
    .scorecard-main { padding: 28px 18px 24px; }
    .score-percent  { font-size: 42px; letter-spacing: -2px; }
    .scorecard-cat-pct { font-size: 22px; }

    /* Tabelas */
    table    { min-width: 560px; }

    /* Titulo da pagina */
    .page-title    { font-size: 17px; }
    .page-header   { flex-direction: column; gap: 10px; align-items: flex-start; }

    /* Trimestre info bar */
    .trimestre-info-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .trimestre-info-right { width: 100%; justify-content: flex-start; }
    .trimestre-qtag { font-size: 20px; }
    .tema-inline { min-width: 100%; }

    /* Tabs */
    .tabs { padding: 0 8px; }
    .tab-btn { padding: 10px 12px; font-size: 12px; }

    /* Modais full-width */
    .modal { min-width: unset; width: calc(100vw - 24px); padding: 22px 18px; border-radius: var(--radius); }
    .modal-obs-wide { min-width: unset; width: calc(100vw - 24px); max-width: unset; }
    .modal-legenda-wide { min-width: unset; width: calc(100vw - 24px); max-width: unset; border-radius: var(--radius); }

    /* Modal legenda grid 1 col */
    .modal-legenda-wide .modal-legenda-grid { grid-template-columns: 1fr !important; }

    /* Ano selector */
    .ano-selector { flex-wrap: wrap; gap: 8px; }

    /* Config grid 1 col */
    .configuracoes-grid { grid-template-columns: 1fr !important; }

    /* Breadcrumb menor */
    .breadcrumb { font-size: 11px; flex-wrap: wrap; }

    /* Scorecard card */
    .scorecard-card { padding: 14px; }

    /* Botões de ação menores */
    .btn-sm { padding: 4px 10px; font-size: 11px; }

    /* Sidebar sections */
    .sidebar-nav { padding: 4px 8px; }
    .nav-item { padding: 9px 10px; font-size: 12.5px; }
}

/* ───────────────────────────────────────────────────────────
   FASE 1 MOBILE — Fundacoes
   - Scroll indicator: visivel apenas em <=1024px, CSS-only
   - Breakpoint 768 com toque generoso e anti-zoom iOS
   - Anti-overflow horizontal em mobile (orbs / topbar / tabelas)
   - NAO altera desktop (tudo dentro de @media)
   ─────────────────────────────────────────────────────────── */

/* ─── Anti-overflow horizontal (mobile/tablet) ─────────────── */
/* Previne que orbs decorativas, tabelas internas ou flex-overflow
   causem drag horizontal da pagina inteira. As tabelas continuam
   scrollaveis dentro de .section (overflow-x: auto).
   IMPORTANTE: aplicado SO em html (nao body), porque overflow-x em body
   transforma body em scroll-container e quebra position:sticky da topbar. */
@media (max-width: 1024px) {
    html { overflow-x: hidden; }
    /* layout-main precisa de min-width:0 para que flex shrink funcione
       e nao expanda alem da viewport */
    .layout-main { max-width: 100vw; min-width: 0; }
    .topbar { max-width: 100%; min-width: 0; }
    /* topbar-right pode ter varios botoes — permita wrap suave em telas pequenas */
    .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
    /* container nao pode ultrapassar viewport */
    .container { max-width: 100%; min-width: 0; }
    /* sections que envolvem tabelas nunca podem expandir o pai */
    .section { max-width: 100%; min-width: 0; }
}

/* ─── Scroll Indicator ─────────────────────────────────────── */
/* Default: invisivel. Aparece somente em viewports <=1024px e
   enquanto scrollable. Desktop fica intocado. */
.scroll-indicator {
    display: none;
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    opacity: 1;
    transition: opacity .35s ease;
    pointer-events: none;
}
.scroll-indicator.hidden { opacity: 0; }
.scroll-indicator-arrow {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(10,11,105,.25), 0 2px 6px rgba(10,11,105,.18);
    animation: scrollHintBounce 1.8s ease infinite;
}
@keyframes scrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}
@media (max-width: 1024px) {
    .scroll-indicator { display: block; }
}

/* ─── Breakpoint 768px — toque + iOS anti-zoom ─────────────── */
/* O sistema ja tem 1024 (tablet) e 640 (mobile pequeno). 768 cobre
   o gap (tablet vertical / mobile grande). Tudo aqui afeta SOMENTE
   <=768px — desktop continua identico. */
@media (max-width: 768px) {
    /* Inputs e selects: 16px previne zoom no iOS; altura 48px
       atinge alvo de toque acessivel */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .inline-input {
        font-size: 16px;
        min-height: 48px;
        padding: 10px 12px;
    }
    /* Selects nativos compactos (admin/role/cliente em usuarios) */
    select.form-control[style*="height:30px"] {
        min-height: 40px;
        font-size: 13px;
    }

    /* Botoes principais: alvo de toque 44px */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .btn-icon { min-width: 38px; min-height: 38px; }

    /* Espacamento entre botoes adjacentes em modais */
    .modal-footer .btn + .btn { margin-left: 8px; }

    /* Inputs de edicao inline ganham folga vertical */
    .editable { min-height: 28px; display: inline-block; }
}

/* ───────────────────────────────────────────────────────────
   FASE 2A — SEMANAL mobile (tabela vira accordion de cards)
   - Header tap-to-expand
   - Semana atual destacada
   - DESKTOP intocado: tudo escopado em @media <=768px
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Container da tabela perde o min-width 680 herdado */
    .container #tabela-semanal { min-width: 0; display: block; }
    #tabela-semanal thead { display: none; }
    #tabela-semanal tbody {
        display: flex; flex-direction: column; gap: 14px;
    }
    #tabela-semanal tbody tr {
        display: flex; flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        overflow: hidden;
        animation: fadeUp .25s ease both;
    }
    #tabela-semanal tbody tr td {
        display: block; border: none; padding: 10px 14px;
        white-space: normal;
    }

    /* Wrapper inline overflow-x:auto da tabela semanal ganha padding no
       mobile — afasta os cards (header azul) do .section-header (tambem
       azul) para nao parecerem uma faixa unica. */
    .section > div[style*="overflow-x:auto"] {
        padding: 14px;
    }

    /* Header (nome) — clicavel para expandir/colapsar
       Fundo primary (azul Trinia) + texto branco para destacar o card
       como uma unidade visual e contrastar com o conteudo claro abaixo. */
    #tabela-semanal td.cel-nome-mobile {
        background: linear-gradient(90deg, var(--primary) 0%, #1214a2 60%, var(--primary-light) 100%);
        color: #fff;
        font-weight: 700; font-size: 15px;
        padding: 14px 16px;
        cursor: pointer;
        user-select: none;
        display: flex; justify-content: space-between; align-items: center;
        gap: 10px;
    }
    #tabela-semanal td.cel-nome-mobile::after {
        content: '';
        flex-shrink: 0;
        width: 9px; height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .25s;
    }
    #tabela-semanal tr.row-open td.cel-nome-mobile::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    /* Linha de info (depto + meta padrao) compacta logo abaixo do header */
    #tabela-semanal td.cel-info-mobile {
        font-size: 11.5px; color: var(--text-muted);
        padding: 8px 16px;
        background: var(--bg-subtle);
    }
    #tabela-semanal td.cel-info-mobile + td.cel-info-mobile {
        padding-top: 0;
        border-bottom: 1px solid var(--border);
    }
    #tabela-semanal td.cel-info-mobile:first-of-type::before {
        content: 'Departamento: ';
        font-weight: 700;
        text-transform: uppercase; letter-spacing: .4px;
        font-size: 9.5px; color: var(--text-muted);
        margin-right: 4px;
    }
    #tabela-semanal td.cel-meta-padrao-mobile::before {
        content: 'Meta padrão: ';
        font-weight: 700;
        text-transform: uppercase; letter-spacing: .4px;
        font-size: 9.5px; color: var(--text-muted);
        margin-right: 4px;
    }

    /* Quando colapsado: somente header visivel */
    #tabela-semanal tr:not(.row-open) td:not(.cel-nome-mobile) {
        display: none;
    }

    /* Cells semanais — empilham com label via data-attr */
    #tabela-semanal td.semanal-cel {
        min-width: 0 !important;
        padding: 14px 16px !important;
        border-top: 1px solid var(--border) !important;
    }
    #tabela-semanal td.semanal-cel::before {
        content: attr(data-semana-label);
        display: block;
        font-size: 10.5px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
        margin-bottom: 10px;
    }
    /* Card interno ocupa largura total */
    #tabela-semanal td.semanal-cel .sem-cell-card { width: 100%; }

    /* Semana atual: destaque sutil + badge */
    #tabela-semanal td.semanal-cel.semana-atual {
        background: rgba(10,11,105,.04);
    }
    #tabela-semanal td.semanal-cel.semana-atual::before {
        color: var(--primary);
    }
    #tabela-semanal td.semanal-cel.semana-atual::after {
        content: 'Semana atual';
        display: inline-block;
        margin-left: 8px;
        margin-top: 8px;
        font-size: 9.5px; font-weight: 700;
        background: var(--primary); color: #fff;
        padding: 5px 9px; border-radius: 9999px;
        vertical-align: middle;
        letter-spacing: .3px;
    }

    /* Estado vazio (sem registro) */
    #tabela-semanal td.semanal-cel .sem-cell-empty {
        padding: 8px;
    }
}

/* ───────────────────────────────────────────────────────────
   FASE 2B — MENSAL detalhe vira cards em <=768px
   - Cada linha da tabela #tbody-detalhe-mes vira um card
   - 9 colunas reorganizam em rows com labels via ::before
   - DESKTOP intocado: tudo escopado em @media (max-width: 768px)
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Tabela do detalhe-mes vira lista vertical de cards */
    #detalhe-mes table { display: block; min-width: 0; }
    #detalhe-mes thead { display: none; }
    #detalhe-mes tbody {
        display: flex; flex-direction: column; gap: 12px;
    }
    #detalhe-mes tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        padding: 12px 14px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        animation: fadeUp .25s ease both;
    }
    #detalhe-mes tbody tr td {
        display: flex; align-items: center; gap: 10px;
        border: none; padding: 6px 0;
        white-space: normal;
        min-height: 0;
    }

    /* Linha 1: prioridade (col 1) + nome (col 2) */
    #detalhe-mes tbody tr td:nth-child(1) {
        grid-row: 1; grid-column: 1;
        padding-bottom: 10px;
        align-self: center;
    }
    #detalhe-mes tbody tr td:nth-child(2) {
        grid-row: 1; grid-column: 2;
        font-weight: 700; font-size: 15px; color: var(--primary);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }

    /* Linhas 2+ ocupam toda a largura, com rotulo via ::before */
    #detalhe-mes tbody tr td:nth-child(n+3) {
        grid-column: 1 / -1;
        font-size: 12.5px; color: var(--text-body);
    }
    #detalhe-mes tbody tr td:nth-child(n+3)::before {
        flex: 0 0 110px;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }
    #detalhe-mes tbody tr td:nth-child(3) { grid-row: 2; }
    #detalhe-mes tbody tr td:nth-child(3)::before { content: 'Departamento'; }
    #detalhe-mes tbody tr td:nth-child(4) { grid-row: 3; }
    #detalhe-mes tbody tr td:nth-child(4)::before { content: 'Formato'; }
    #detalhe-mes tbody tr td:nth-child(5) { grid-row: 4; }
    #detalhe-mes tbody tr td:nth-child(5)::before { content: 'Direção'; }

    /* Bloco de valores (meta, realizado, atingimento) com separador */
    #detalhe-mes tbody tr td:nth-child(6) {
        grid-row: 5;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #detalhe-mes tbody tr td:nth-child(6)::before { content: 'Meta'; }
    #detalhe-mes tbody tr td:nth-child(7) { grid-row: 6; }
    #detalhe-mes tbody tr td:nth-child(7)::before { content: 'Realizado'; }
    #detalhe-mes tbody tr td:nth-child(8) { grid-row: 7; }
    #detalhe-mes tbody tr td:nth-child(8)::before { content: 'Atingimento'; }

    /* Botao de observacao alinhado a direita, separador no topo */
    #detalhe-mes tbody tr td:nth-child(9) {
        grid-row: 8;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border);
        justify-content: flex-end;
    }
    #detalhe-mes tbody tr td:nth-child(9)::before { content: ''; flex: 0 0 0; }
    /* meses-grid ja eh tratada por @media 1024 (3 cols) e 640 (2 cols) — nao
       sobrescrever no 768 para nao confundir cascade */
}

/* ───────────────────────────────────────────────────────────
   FASE 2 — Ajustes pos-feedback mobile
   - Topbar empilha em <=768 (cliente em cima, botoes em baixo)
   - Inputs/selects menos massudos (44px, nao 48)
   - Hover removido em touch (anti-sticky)
   - Plano de fundo mais Trinia (orbs maiores e mais visiveis)
   - tab-section-actions flex-wrap (trimestre)
   - DESKTOP intocado: tudo escopado em @media
   ─────────────────────────────────────────────────────────── */

/* ─── 1. Topbar empilha em mobile (cliente cima / botoes baixo) ── */
@media (max-width: 768px) {
    .topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 50px;
        padding: 8px 14px;
        row-gap: 6px;
        align-items: center;
    }
    .topbar-left {
        flex: 1 1 100%;
        min-width: 0;
        gap: 8px;
    }
    .topbar-title {
        white-space: normal;
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .topbar-right {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 2px;
    }
    /* Botoes de topbar respiram em row + sao todos da mesma altura */
    .topbar-right .btn,
    .topbar-right .btn-sm {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ─── 2. Inputs/selects menos massudos (44px, padding menor) ──── */
@media (max-width: 768px) {
    input.form-control,
    select.form-control,
    textarea.form-control,
    .inline-input {
        min-height: 44px;
        padding: 8px 12px;
        /* font-size 16px ja vem da regra anterior — mantido para anti-zoom iOS */
    }
    /* Compactar selects pequenos do header (ano selector) */
    .ano-selector { padding: 10px 14px; }
    .ano-selector select.form-control { min-height: 40px; padding: 6px 10px; }
    .ano-selector label { font-size: 12px; }
}

/* ─── 3. Sem hover sticky em touch ─────────────────────────────── */
@media (hover: none) {
    /* Ao tocar, navegadores mantem o estado :hover ate proximo tap.
       Aqui zeramos efeitos visuais que ficam "presos" nos cards. */
    .btn:hover, button:hover { transform: none !important; }
    .cliente-card:hover,
    .mes-card:hover,
    .trimestre-card:hover,
    .scorecard-card:hover,
    .depto-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
        border-color: var(--glass-border) !important;
    }
    .nav-item:hover { background: rgba(255,255,255,0.04) !important; }
    .editable:hover { background: transparent !important; }
    .btn-obs:hover { background: revert !important; }
    a:hover { text-decoration: none !important; }
    /* Tap-highlight padrao (cinza Android) — sumir */
    * { -webkit-tap-highlight-color: transparent; }
}

/* ─── 4. Plano de fundo mais "Trinia" em mobile/tablet ─────────── */
/* Com html { overflow-x: hidden } as orbs decorativas eram clipadas e
   restavam pouca cor visivel — solucao: orbs menores mas mais saturadas
   posicionadas dentro da viewport. */
@media (max-width: 1024px) {
    html {
        background: linear-gradient(150deg, #eaeefb 0%, #e3e6f3 45%, #efe9f3 100%);
    }
    html::before {
        width: 480px; height: 480px;
        top: -120px; right: -100px;
        background: radial-gradient(circle at 50% 50%, rgba(10,11,105,0.14) 0%, rgba(10,11,105,0.04) 50%, transparent 72%);
    }
    html::after {
        width: 420px; height: 420px;
        bottom: -100px; left: -80px;
        background: radial-gradient(circle at 50% 50%, rgba(249,46,120,0.11) 0%, rgba(249,46,120,0.03) 55%, transparent 72%);
    }
    /* Terceiro orb (do body) some em mobile — ja tinhamos pouco espaco */
    body::before { display: none; }
}

/* ─── 5. tab-section-actions wrap (trimestre tabs) ─────────────── */
@media (max-width: 768px) {
    .tab-section-actions {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .tab-section-actions .btn { flex: 0 0 auto; }
}

/* OBS: O cabecalho de tabela do trimestre (image 3) sera resolvido na
   Fase 3 via conversao de tabelas em cards. Ate la, o .section preserva
   overflow-x: auto (rola horizontalmente dentro da secao). */

/* ───────────────────────────────────────────────────────────
   FASE 3 — Trimestre / Painel / Scorecard viram cards em <=768px
   - 4 tabelas do trimestre (rochas/numeros/projetos/emergentes)
   - 2 tabelas do painel (projetos_anuais/indicadores_anuais)
   - Tabela do scorecard (breakdown) + cards de categoria 1 col
   - DESKTOP intocado: tudo escopado em @media (max-width: 768px)
   ─────────────────────────────────────────────────────────── */

/* ─── 3.1 Trimestre — 4 tabelas em cards ──────────────────── */
@media (max-width: 768px) {
    /* Anula horizontal scroll da .tab-panel.section (era preciso para
       tables com min-width 680). Em mobile cada linha vira card.
       PADDING fica na <table>, NAO na .section — para o .tab-section-actions
       e qualquer header continuarem colando nas bordas (preserva o
       clipping arredondado de overflow:hidden + border-radius). */
    .tab-panel.section { overflow: hidden !important; }
    .tab-panel.section table { display: block; min-width: 0; padding: 14px; }
    .tab-panel.section thead { display: none; }
    .tab-panel.section tbody {
        display: flex; flex-direction: column; gap: 12px;
    }

    /* Cada <tr> vira um card grid 2 colunas */
    .tab-panel.section tbody tr {
        display: grid;
        grid-template-columns: minmax(108px, auto) 1fr;
        column-gap: 10px;
        padding: 12px 14px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        animation: fadeUp .25s ease both;
    }
    .tab-panel.section tbody tr td {
        display: flex; align-items: center; gap: 10px;
        border: none; padding: 6px 0;
        white-space: normal;
        min-height: 0;
    }

    /* Estado vazio (msg-empty) ocupa toda a largura */
    .tab-panel.section tbody tr td.msg-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 20px 8px;
        color: var(--text-muted);
        font-style: italic;
    }

    /* Coluna 1 (titulo) — destaque, sem rotulo, separa por divider */
    .tab-panel.section tbody tr td:nth-child(1) {
        grid-column: 1 / -1;
        font-weight: 700; font-size: 15px; color: var(--primary);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }

    /* Demais colunas: rotulo via ::before */
    .tab-panel.section tbody tr td:nth-child(n+2) {
        grid-column: 1 / -1;
        font-size: 12.5px; color: var(--text-body);
    }
    .tab-panel.section tbody tr td:nth-child(n+2)::before {
        flex: 0 0 110px;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }

    /* Labels especificos: cols 2,4,5,6,7,8,9 sao iguais entre as 4 tabelas */
    .tab-panel.section tbody tr td:nth-child(2)::before { content: 'Responsável'; }
    .tab-panel.section tbody tr td:nth-child(4)::before { content: 'Progresso'; }
    .tab-panel.section tbody tr td:nth-child(5)::before { content: 'Início'; }
    .tab-panel.section tbody tr td:nth-child(6)::before { content: 'Fim'; }
    .tab-panel.section tbody tr td:nth-child(7)::before { content: 'Peso'; }
    .tab-panel.section tbody tr td:nth-child(8)::before { content: 'Situação'; }
    .tab-panel.section tbody tr td:nth-child(9)::before { content: 'Pontos'; }

    /* Coluna 3 varia por tabela */
    #tbody-rochas       tr td:nth-child(3)::before { content: 'Critério'; }
    #tbody-numeros      tr td:nth-child(3)::before { content: 'Dept / Meta'; }
    #tbody-projetos     tr td:nth-child(3)::before { content: 'Indicadores'; }
    #tbody-emergentes   tr td:nth-child(3)::before { content: 'Indicadores'; }

    /* Bloco visual: situação + pontos com divider em cima */
    .tab-panel.section tbody tr td:nth-child(8) {
        padding-top: 10px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }

    /* Acoes (obs button + delete) — ultimas 2 cols a direita com divider */
    .tab-panel.section tbody tr td:nth-child(10),
    .tab-panel.section tbody tr td:nth-child(11) {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .tab-panel.section tbody tr td:nth-child(10)::before,
    .tab-panel.section tbody tr td:nth-child(11)::before {
        content: ''; flex: 0 0 0;
    }
    .tab-panel.section tbody tr td:nth-child(10) {
        padding-top: 10px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    /* Quando ha tanto obs quanto delete, juntar visualmente */
    .tab-panel.section tbody tr td:nth-child(11) {
        padding-top: 0; margin-top: -4px;
    }

    /* tfoot com total — glass card com accent primary a esquerda */
    .tab-panel.section table tfoot { display: block; margin-top: 14px; }
    .tab-panel.section table tfoot tr {
        display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
        padding: 13px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-left: 3px solid var(--primary);
        border-radius: var(--radius);
        gap: 10px;
    }
    .tab-panel.section table tfoot tr td {
        display: inline-block; padding: 0; border: none;
        text-align: left !important;
    }
    .tab-panel.section table tfoot tr td:first-child {
        font-size: 10.5px;
        font-weight: 800;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: .6px;
    }
    .tab-panel.section table tfoot tr td:last-child {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-dark);
    }

    /* Tabs: garante que nao apareca scroll horizontal nelas (ja deve ter) */
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ─── 3.2 Painel — projetos_anuais e indicadores_anuais ───── */
/* Usa :has() para identificar sections que contem essas tbodies.
   Suporte: iOS 15.4+, Chrome 105+ (set/2022). Em browsers antigos,
   fallback degrada para tabela scrollavel (estado atual). */
@media (max-width: 768px) {
    .section:has(#tbody-projetos-anuais),
    .section:has(#tbody-indicadores-anuais) {
        overflow: hidden !important;
        /* sem padding — .section-header precisa colar nas bordas para
           ser recortado pelo border-radius da section */
    }
    .section:has(#tbody-projetos-anuais) > table,
    .section:has(#tbody-indicadores-anuais) > table {
        display: block; min-width: 0; padding: 14px;
    }
    .section:has(#tbody-projetos-anuais) thead,
    .section:has(#tbody-indicadores-anuais) thead {
        display: none;
    }

    #tbody-projetos-anuais,
    #tbody-indicadores-anuais {
        display: flex; flex-direction: column; gap: 12px;
    }
    #tbody-projetos-anuais > tr,
    #tbody-indicadores-anuais > tr {
        display: grid;
        grid-template-columns: minmax(108px, auto) 1fr;
        column-gap: 10px;
        padding: 12px 14px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        animation: fadeUp .25s ease both;
    }
    #tbody-projetos-anuais > tr > td,
    #tbody-indicadores-anuais > tr > td {
        display: flex; align-items: center; gap: 10px;
        border: none; padding: 6px 0;
        white-space: normal;
        min-height: 0;
    }

    /* Estado vazio */
    #tbody-projetos-anuais > tr > td.msg-empty,
    #tbody-indicadores-anuais > tr > td.msg-empty {
        grid-column: 1 / -1;
        text-align: center; padding: 20px 8px;
        color: var(--text-muted); font-style: italic;
    }

    /* Coluna 1 (titulo): destaque com divider */
    #tbody-projetos-anuais > tr > td:nth-child(1),
    #tbody-indicadores-anuais > tr > td:nth-child(1) {
        grid-column: 1 / -1;
        font-weight: 700; font-size: 15px; color: var(--primary);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
    }

    /* Demais colunas: rotulo via ::before */
    #tbody-projetos-anuais > tr > td:nth-child(n+2),
    #tbody-indicadores-anuais > tr > td:nth-child(n+2) {
        grid-column: 1 / -1;
        font-size: 12.5px; color: var(--text-body);
    }
    #tbody-projetos-anuais > tr > td:nth-child(n+2)::before,
    #tbody-indicadores-anuais > tr > td:nth-child(n+2)::before {
        flex: 0 0 110px;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }

    /* projetos_anuais (10 cols: titulo, resp, meta, prog, ini, fim, peso, pontos, obs, del) */
    #tbody-projetos-anuais > tr > td:nth-child(2)::before { content: 'Responsável'; }
    #tbody-projetos-anuais > tr > td:nth-child(3)::before { content: 'Meta'; }
    #tbody-projetos-anuais > tr > td:nth-child(4)::before { content: 'Progresso'; }
    #tbody-projetos-anuais > tr > td:nth-child(5)::before { content: 'Início'; }
    #tbody-projetos-anuais > tr > td:nth-child(6)::before { content: 'Fim'; }
    #tbody-projetos-anuais > tr > td:nth-child(7)::before { content: 'Peso'; }
    #tbody-projetos-anuais > tr > td:nth-child(8)::before { content: 'Pontos'; }
    #tbody-projetos-anuais > tr > td:nth-child(8) {
        padding-top: 10px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    /* Acoes (obs col 9 + delete col 10) — alinha a direita */
    #tbody-projetos-anuais > tr > td:nth-child(9),
    #tbody-projetos-anuais > tr > td:nth-child(10) {
        justify-content: flex-end;
    }
    #tbody-projetos-anuais > tr > td:nth-child(9)::before,
    #tbody-projetos-anuais > tr > td:nth-child(10)::before {
        content: ''; flex: 0 0 0;
    }
    #tbody-projetos-anuais > tr > td:nth-child(9) {
        padding-top: 10px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-projetos-anuais > tr > td:nth-child(10) {
        padding-top: 0; margin-top: -4px;
    }

    /* indicadores_anuais (6 cols: titulo, depto, meta, resp, obs, del) */
    #tbody-indicadores-anuais > tr > td:nth-child(2)::before { content: 'Departamento'; }
    #tbody-indicadores-anuais > tr > td:nth-child(3)::before { content: 'Meta'; }
    #tbody-indicadores-anuais > tr > td:nth-child(4)::before { content: 'Responsável'; }
    #tbody-indicadores-anuais > tr > td:nth-child(5),
    #tbody-indicadores-anuais > tr > td:nth-child(6) {
        justify-content: flex-end;
    }
    #tbody-indicadores-anuais > tr > td:nth-child(5)::before,
    #tbody-indicadores-anuais > tr > td:nth-child(6)::before {
        content: ''; flex: 0 0 0;
    }
    #tbody-indicadores-anuais > tr > td:nth-child(5) {
        padding-top: 10px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-indicadores-anuais > tr > td:nth-child(6) {
        padding-top: 0; margin-top: -4px;
    }

    /* tfoot projetos_anuais — glass card com accent primary */
    .section:has(#tbody-projetos-anuais) tfoot { display: block; margin-top: 14px; }
    .section:has(#tbody-projetos-anuais) tfoot tr {
        display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
        padding: 13px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-left: 3px solid var(--primary);
        border-radius: var(--radius);
        gap: 10px;
    }
    .section:has(#tbody-projetos-anuais) tfoot tr td {
        display: inline-block; padding: 0; border: none;
        text-align: left !important;
    }
    .section:has(#tbody-projetos-anuais) tfoot tr td:first-child {
        font-size: 10.5px;
        font-weight: 800;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: .6px;
    }
    .section:has(#tbody-projetos-anuais) tfoot tr td:last-child {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-dark);
    }

    /* trimestres-grid — em mobile ja eh 1 col (640 rule), reforco em 768 */
    .trimestres-grid { padding: 14px; }

    /* ─── Bug A1+A2+A3: section-header em mobile ────────────────
       A1: mantem o gradient azul mas comprime padding
       A2: h2 ganha flex:1 1 0 + min-width:0 → encolhe e quebra
           internamente sem empurrar o botao "+ Adicionar"
       A3: padding e font reduzidos */
    .section-header {
        flex-wrap: wrap;
        padding: 10px 14px;
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
    }
    .section-header h2 {
        flex: 1 1 0;
        min-width: 0;
        font-size: 11px;
        line-height: 1.35;
        word-break: break-word;
    }
    .section-header .btn,
    .section-header > button {
        flex: 0 0 auto;
        align-self: center;
    }

    /* ─── Bug B1+B2: ano-selector compacto ─────────────────────
       Filtros (label + select) alinham a ESQUERDA.
       Botoes (.btn) sao empurrados para a DIREITA via margin-left:auto. */
    .ano-selector {
        padding: 8px 10px;
        gap: 6px 10px;
        margin-bottom: 12px;
        justify-content: flex-start;
    }
    .ano-selector > .btn,
    .ano-selector > button {
        margin-left: auto;
    }
    .ano-selector label {
        font-size: 11px;
        white-space: nowrap;
    }
    .ano-selector select.form-control {
        min-height: 36px;
        font-size: 14px;
        padding: 3px 6px;
        max-width: 130px !important;
    }
    .ano-selector .btn {
        min-height: 36px;
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* ─── Bug C1: tfoot orfao quando tbody esta vazio ──────────────
   Desktop e mobile: quando o tbody mostra "msg-empty" (estado vazio),
   o tfoot exibia "Total: " sem valor. Agora some via CSS.
   Usa :has() (iOS 15.4+, Chrome 105+); browsers antigos preservam o
   estado anterior (tfoot vazio visivel — comportamento atual). */
table:has(tbody > tr > td.msg-empty) tfoot { display: none; }

/* ───────────────────────────────────────────────────────────
   FASE 4 — Modo "Preencher Semana" (rapid-fill mobile)
   - Botao visivel apenas em <=768px
   - Modal listando indicadores x semana com so realizado
   ─────────────────────────────────────────────────────────── */
.btn-rapid-fill { display: none !important; }
@media (max-width: 768px) {
    .btn-rapid-fill { display: inline-flex !important; }
}

.modal-rapid-fill {
    max-width: 540px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.rapid-fill-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 4px;
}
.rapid-fill-row {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.rapid-fill-row-head {
    display: flex; flex-wrap: wrap;
    align-items: baseline; justify-content: space-between;
    gap: 6px;
}
.rapid-fill-row-nome {
    font-weight: 700; font-size: 14px; color: var(--primary);
    line-height: 1.3;
}
.rapid-fill-row-meta {
    font-size: 11.5px; color: var(--text-muted);
    flex-shrink: 0;
}
.rapid-fill-input {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* anti-zoom iOS */
    text-align: center;
    font-weight: 700;
    letter-spacing: -.1px;
}


/* ─── 3.3 Scorecard — breakdown vira cards e cards de categoria 1 col ── */
@media (max-width: 768px) {
    /* Cards de categoria 1 col em <=768 (existente 640 ja faz; aqui
       apenas forco para 768 cobrir tablet retrato) */
    .scorecard-grid { grid-template-columns: 1fr; gap: 10px; }

    /* Score principal — centraliza e diminui um pouco em mobile */
    .scorecard-main { padding: 26px 18px 22px; }

    /* Tabela breakdown vira cards */
    .section:has(#tbody-breakdown) {
        overflow: hidden !important;
    }
    .section:has(#tbody-breakdown) > table {
        display: block; min-width: 0; padding: 14px;
    }
    .section:has(#tbody-breakdown) thead { display: none; }

    #tbody-breakdown {
        display: flex; flex-direction: column; gap: 10px;
    }
    #tbody-breakdown > tr {
        display: grid;
        grid-template-columns: minmax(108px, auto) 1fr;
        column-gap: 10px;
        padding: 12px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
    }
    #tbody-breakdown > tr > td {
        display: flex; align-items: center; gap: 10px;
        border: none; padding: 5px 0;
        white-space: normal;
        min-height: 0;
        text-align: left !important;
    }

    /* Linha 1: Categoria badge (col 1) + Titulo (col 2) */
    #tbody-breakdown > tr > td:nth-child(1) {
        grid-column: 1; grid-row: 1;
        padding-bottom: 8px;
    }
    #tbody-breakdown > tr > td:nth-child(2) {
        grid-column: 2; grid-row: 1;
        font-weight: 700; font-size: 14px; color: var(--primary);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

    /* Demais cols (3-9): full width com label via ::before */
    #tbody-breakdown > tr > td:nth-child(n+3) {
        grid-column: 1 / -1;
        font-size: 12.5px;
    }
    #tbody-breakdown > tr > td:nth-child(n+3)::before {
        flex: 0 0 110px;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }
    #tbody-breakdown > tr > td:nth-child(3)::before { content: 'Peso'; }
    #tbody-breakdown > tr > td:nth-child(4)::before { content: 'Progresso'; }
    #tbody-breakdown > tr > td:nth-child(5)::before { content: 'Situação'; }
    #tbody-breakdown > tr > td:nth-child(6)::before { content: 'Nota'; }
    #tbody-breakdown > tr > td:nth-child(7)::before { content: 'Mult.'; }

    /* Bloco final: Pontos + Maximo separado por divider */
    #tbody-breakdown > tr > td:nth-child(8) {
        padding-top: 8px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-breakdown > tr > td:nth-child(8)::before { content: 'Pontos'; }
    #tbody-breakdown > tr > td:nth-child(9)::before { content: 'Máximo'; }

    /* Subtotal-row: barra horizontal compacta com fundo destacado */
    #tbody-breakdown > tr.subtotal-row {
        display: flex; flex-direction: row; flex-wrap: wrap;
        align-items: center; justify-content: space-between;
        background: var(--bg-subtle);
        padding: 10px 12px;
        border-radius: var(--radius);
        gap: 8px;
        border: 1px solid var(--border);
    }
    #tbody-breakdown > tr.subtotal-row > td {
        padding: 0; border: none; flex: 0 0 auto;
        font-size: 12px; font-weight: 700;
        gap: 6px;
    }
    #tbody-breakdown > tr.subtotal-row > td:first-child {
        flex: 1 1 100%; color: var(--primary);
    }
    #tbody-breakdown > tr.subtotal-row > td:first-child::before { content: ''; flex: 0; }
    #tbody-breakdown > tr.subtotal-row > td:not(:first-child)::before {
        content: ''; flex: 0;
    }

    /* tfoot total geral — glass card com accent primary */
    #tfoot-breakdown { display: block; margin-top: 14px; }
    #tfoot-breakdown tr {
        display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
        padding: 13px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-left: 3px solid var(--primary);
        border-radius: var(--radius);
        gap: 8px;
        flex-wrap: wrap;
    }
    #tfoot-breakdown tr td {
        display: inline-block; padding: 0; border: none;
        text-align: left !important;
    }
    #tfoot-breakdown tr td:first-child {
        flex: 1 1 100%;
        font-size: 10.5px;
        font-weight: 800;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: .6px;
        margin-bottom: 2px;
    }
    #tfoot-breakdown tr td:not(:first-child) {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-dark);
    }
}

/* ─── 3.4 Usuarios — tabela vira cards mobile (admin) ─────── */
@media (max-width: 768px) {
    .section:has(#tbody-usuarios) {
        overflow: hidden !important;
    }
    .section:has(#tbody-usuarios) > table {
        display: block; min-width: 0; padding: 14px;
    }
    .section:has(#tbody-usuarios) thead {
        display: none;
    }
    #tbody-usuarios {
        display: flex; flex-direction: column; gap: 12px;
    }
    #tbody-usuarios > tr {
        display: grid;
        grid-template-columns: minmax(98px, auto) 1fr;
        column-gap: 10px;
        padding: 12px 14px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
    }
    #tbody-usuarios > tr > td {
        display: flex; align-items: center; gap: 10px;
        border: none; padding: 5px 0;
        white-space: normal; min-height: 0;
    }
    #tbody-usuarios > tr > td.msg-empty {
        grid-column: 1 / -1;
        text-align: center; padding: 18px 0;
        color: var(--text-muted); font-style: italic;
    }
    /* Col 1 (nome): destaque + divider */
    #tbody-usuarios > tr > td:nth-child(1) {
        grid-column: 1 / -1;
        font-weight: 700; font-size: 14.5px; color: var(--primary);
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    /* Cols 2-5: rotulos via ::before */
    #tbody-usuarios > tr > td:nth-child(n+2) {
        grid-column: 1 / -1;
        font-size: 12.5px; color: var(--text-body);
    }
    #tbody-usuarios > tr > td:nth-child(n+2)::before {
        flex: 0 0 84px;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }
    #tbody-usuarios > tr > td:nth-child(2)::before { content: 'Email'; }
    #tbody-usuarios > tr > td:nth-child(3)::before { content: 'Role'; }
    #tbody-usuarios > tr > td:nth-child(4)::before { content: 'Cliente'; }
    #tbody-usuarios > tr > td:nth-child(5)::before { content: 'Status'; }
    /* Email pode ser longo — quebra */
    #tbody-usuarios > tr > td:nth-child(2) {
        word-break: break-all;
    }
    /* Selects internos preenchem largura disponivel */
    #tbody-usuarios > tr > td:nth-child(3) > select.form-control,
    #tbody-usuarios > tr > td:nth-child(4) > select.form-control {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
    }
    /* Col 6 (badge "Você") — alinha a direita; some se vazia */
    #tbody-usuarios > tr > td:nth-child(6) {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 8px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-usuarios > tr > td:nth-child(6)::before { content: ''; flex: 0 0 0; }
    #tbody-usuarios > tr > td:nth-child(6):empty {
        display: none;
    }
}

/* ─── Polish modal "Entender a Pontuacao" (scorecard) em mobile ──── */
@media (max-width: 768px) {
    /* Modal mais compacto, mantem as 2 secoes mas em 1 col (ja existia) */
    .modal-legenda-wide {
        padding: 18px 16px !important;
    }
    .modal-legenda-wide h3 { font-size: 15px !important; }
    /* Tabelas de pesos e regras de pontuacao */
    .modal-legenda-wide table { font-size: 11.5px; width: 100%; }
    .modal-legenda-wide table th { padding: 4px 6px 6px 0 !important; font-size: 9.5px !important; }
    .modal-legenda-wide table td { padding: 3px 6px !important; }
    .modal-legenda-wide table tfoot td { padding: 6px 6px 4px 0 !important; }
    /* Paragrafos compactos */
    .modal-legenda-wide p { font-size: 11.5px !important; line-height: 1.55 !important; margin-bottom: 8px !important; }
    /* Bloco "Por que os dois numeros diferem?" — reduzir padding interno */
    .modal-legenda-wide [style*="background:var(--primary-pale)"],
    .modal-legenda-wide [style*="background: var(--primary-pale)"],
    .modal-legenda-wide [style*="background:var(--bg-subtle)"] {
        padding: 10px 12px !important;
    }
    /* Titulos das secoes (CATEGORIA / TOTAL GERAL) */
    .modal-legenda-wide [style*="font-size:11px"][style*="text-transform:uppercase"] {
        font-size: 10.5px !important;
        margin-bottom: 8px !important;
    }
    /* Contribuicao na tabela de Score Composto: empilha em 1 linha por categoria */
    .modal-legenda-wide table tr {
        line-height: 1.4;
    }
    /* Espaco entre as 2 grandes colunas de explicacao (Composto / Total Geral) */
    .modal-legenda-wide .modal-legenda-grid {
        gap: 18px !important;
    }
}

/* ─── Configuracoes — tabelas internas sem horizontal scroll ──── */
@media (max-width: 768px) {
    .config-section table { min-width: 0; }
    .config-section-body { padding: 12px 14px; }
    .config-section-header { padding: 10px 14px; }
    /* Inputs de config (notas/multiplicadores/pesos) sao numericos pequenos
       — mantemos font 16px (anti-zoom iOS) com padding/altura compactos */
    .config-section table input.form-control {
        font-size: 16px;
        min-height: 38px;
        padding: 4px 8px;
        max-width: 100px;
    }
}

/* ───────────────────────────────────────────────────────────
   FASE 5 — Polish admin modais (gerenciar template / gerenciar)
   - tbody-template (mensal): 6 cols
   - tbody-gerenciar (semanal): 7 cols
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Wrapper inline overflow-x:auto vira visible (cards em vez de scroll) */
    #modal-gerenciar-template > .modal > div[style*="overflow-x"],
    #modal-gerenciar > .modal > div[style*="overflow-x"] {
        overflow: visible !important;
    }
    /* Tables admin: display block para layout fluido */
    #modal-gerenciar-template table,
    #modal-gerenciar table {
        display: block;
        min-width: 0;
    }
    #modal-gerenciar-template thead,
    #modal-gerenciar thead { display: none; }

    #tbody-template,
    #tbody-gerenciar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #tbody-template > tr,
    #tbody-gerenciar > tr {
        display: grid;
        grid-template-columns: minmax(78px, auto) 1fr;
        column-gap: 10px;
        padding: 10px 12px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
    }
    #tbody-template > tr > td,
    #tbody-gerenciar > tr > td {
        display: flex; align-items: center; gap: 8px;
        border: none; padding: 4px 0;
        white-space: normal; min-height: 0;
    }

    /* Estado vazio */
    #tbody-template > tr > td.msg-empty,
    #tbody-gerenciar > tr > td.msg-empty {
        grid-column: 1 / -1;
        text-align: center; padding: 18px 0;
        color: var(--text-muted); font-style: italic;
    }

    /* Col 1 (nome): destaque + divider */
    #tbody-template > tr > td:nth-child(1),
    #tbody-gerenciar > tr > td:nth-child(1) {
        grid-column: 1 / -1;
        font-weight: 700; font-size: 14px; color: var(--primary);
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }

    /* Cols 2+: rotulos via ::before */
    #tbody-template > tr > td:nth-child(n+2),
    #tbody-gerenciar > tr > td:nth-child(n+2) {
        grid-column: 1 / -1;
        font-size: 12px;
    }
    #tbody-template > tr > td:nth-child(n+2)::before,
    #tbody-gerenciar > tr > td:nth-child(n+2)::before {
        flex: 0 0 78px;
        font-size: 9.5px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .4px;
    }

    /* Selects/inputs internos preenchem largura disponivel */
    #tbody-template > tr > td > select.form-control,
    #tbody-gerenciar > tr > td > select.form-control,
    #tbody-template > tr > td > .editable,
    #tbody-gerenciar > tr > td > .editable {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
    }

    /* TEMPLATE (mensal) — 6 cols */
    #tbody-template > tr > td:nth-child(2)::before { content: 'Depto'; }
    #tbody-template > tr > td:nth-child(3)::before { content: 'Formato'; }
    #tbody-template > tr > td:nth-child(4)::before { content: 'Direção'; }
    #tbody-template > tr > td:nth-child(5)::before { content: 'Status'; }
    #tbody-template > tr > td:nth-child(5) {
        padding-top: 8px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-template > tr > td:nth-child(6) {
        justify-content: flex-end;
    }
    #tbody-template > tr > td:nth-child(6)::before { content: ''; flex: 0 0 0; }
    #tbody-template > tr > td:nth-child(6):empty { display: none; }

    /* GERENCIAR (semanal) — 7 cols */
    #tbody-gerenciar > tr > td:nth-child(2)::before { content: 'Depto'; }
    #tbody-gerenciar > tr > td:nth-child(3)::before { content: 'Formato'; }
    #tbody-gerenciar > tr > td:nth-child(4)::before { content: 'Direção'; }
    #tbody-gerenciar > tr > td:nth-child(5)::before { content: 'Meta padrão'; }
    #tbody-gerenciar > tr > td:nth-child(6)::before { content: 'Status'; }
    #tbody-gerenciar > tr > td:nth-child(6) {
        padding-top: 8px; margin-top: 4px;
        border-top: 1px solid var(--border);
    }
    #tbody-gerenciar > tr > td:nth-child(7) {
        justify-content: flex-end;
    }
    #tbody-gerenciar > tr > td:nth-child(7)::before { content: ''; flex: 0 0 0; }
    #tbody-gerenciar > tr > td:nth-child(7):empty { display: none; }
}

/* ───────────────────────────────────────────────────────────
   FASE 5 — Bottom sheet pattern para modais em <=768px
   - Modal vira painel deslizando de baixo (familiar em mobile)
   - Border-radius so no topo
   - Footer (botoes Salvar/Cancelar) sticky no rodape
   - Conteudo scrolla se exceder viewport
   ─────────────────────────────────────────────────────────── */
@keyframes slideBottomSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal-overlay > .modal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        max-height: 92vh;
        margin: 0 !important;
        padding: 18px 18px 0 !important;
        animation: slideBottomSheet .25s cubic-bezier(.32,.72,.17,1) !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* Drag-handle visual no topo (decorativo) */
    .modal-overlay > .modal::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        background: rgba(10,11,105,.18);
        border-radius: 999px;
        margin: -6px auto 14px;
        flex-shrink: 0;
    }
    /* Por padrao, filhos diretos do .modal nao crescem nem encolhem
       (header, form-groups, footer mantem altura natural) */
    .modal-overlay > .modal > * {
        flex-shrink: 0;
    }
    /* Areas de conteudo que DEVEM crescer e scrollar quando excedem
       o viewport (admin lists, RTE, rapid-fill, scorecard legenda) */
    .modal-overlay > .modal > div[style*="overflow-x"],
    .modal-overlay > .modal > div[style*="overflow-y"],
    .modal-overlay > .modal > #scorecard-legenda,
    .modal-overlay > .modal > .rte-container,
    .modal-overlay > .modal > .rapid-fill-list {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    /* RTE editor: quando container cresce, editor cresce junto */
    .modal-obs-wide .rte-container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    .modal-obs-wide .rte-editor {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    /* Modal-footer fica sticky no rodape com gradiente fade-in */
    .modal-overlay > .modal > .modal-footer {
        position: sticky;
        bottom: 0;
        left: 0; right: 0;
        margin-top: auto;
        margin-left: -18px; margin-right: -18px;
        padding: 14px 18px 18px;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 28%, rgba(255,255,255,0.96) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        z-index: 5;
    }
    .modal-overlay > .modal > .modal-footer .btn { flex: 1 1 auto; }
    /* Modal de obs (RTE) — height fixo 92vh para o editor respirar */
    .modal-obs-wide,
    .modal-rapid-fill,
    .modal-legenda-wide {
        height: 92vh !important;
        max-height: 92vh !important;
    }
    .modal-legenda-wide #scorecard-legenda {
        max-height: none !important;
        padding-right: 0 !important;
    }
}

/* ─── FASE 5 — A11y: focus visivel + tap-target keyboard ────── */
/* :focus-visible mostra anel de foco APENAS quando navegado via teclado.
   Mouse/touch nao mostra (UX limpa). Universal — desktop + mobile. */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Botoes de icone (obs, delete, hamburger) ja foram contemplados via
   regra acima. Removemos qualquer outline diferente padrao do navegador. */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus {
    outline: none; /* default browser */
}
/* Acordeao de semanal (td.cel-nome-mobile clicavel) ganha foco visivel */
.cel-nome-mobile:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 4px rgba(10,11,105,.55);
}