/* ============================================================
   CRMA PHP v0.1 — Estilos globais
   Identidade visual: Ribeiro Marques Advocacia
   Sem dependência de build — CSS puro
   ============================================================ */

/* ---------------------------------------------------------------
   1. Variáveis CSS
   --------------------------------------------------------------- */
:root {
    /* Paleta principal */
    --gold:           #B99A45;
    --gold-dark:      #A08838;
    --gold-light:     #D4B96A;
    --gold-muted:     #F5F1E8;
    --gold-border:    #ECE6D9;

    /* Texto */
    --text-dark:      #2E2E2E;
    --text-mid:       #4A4A4A;
    --text-gray:      #6F6F6F;
    --text-light:     #9E9E9E;
    --text-muted:     #BFBFBF;

    /* Fundo */
    --bg-page:        #F7F7F5;
    --bg-white:       #FFFFFF;
    --bg-muted:       #F9F9F7;

    /* Status */
    --green:          #16A34A;
    --green-bg:       #F0FDF4;
    --green-border:   #86EFAC;
    --red:            #DC2626;
    --red-bg:         #FEF2F2;
    --red-border:     #FECACA;
    --blue:           #2563EB;
    --blue-bg:        #EFF6FF;
    --blue-border:    #BFDBFE;
    --orange:         #EA580C;
    --orange-bg:      #FFF7ED;
    --orange-border:  #FED7AA;

    /* Layout */
    --header-height:  56px;
    --sidebar-width:  220px;
    --footer-height:  36px;
    --radius-sm:      6px;
    --radius-md:      10px;
    --radius-lg:      14px;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);

    /* Tipografia */
    --font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ---------------------------------------------------------------
   2. Reset e base
   --------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-page);
    color: var(--text-dark);
    line-height: 1.55;
    min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }

svg { flex-shrink: 0; }

/* ---------------------------------------------------------------
   3. Layout principal (header + sidebar + main + footer)
   --------------------------------------------------------------- */

/* -- Cabeçalho fixo -- */
.crma-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-white);
    border-bottom: 1px solid rgba(185,154,69,.30);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    z-index: 100;
    gap: 1rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.header-monogram {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-brand-text {
    display: flex;
    flex-direction: column;
}

.header-office-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.header-system-name {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.2;
}

.header-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.header-version-badge {
    display: none;
    background: var(--gold-muted);
    border: 1px solid var(--gold-border);
    color: var(--text-gray);
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
}

@media (min-width: 768px) {
    .header-version-badge { display: inline-flex; }
}

.header-user {
    display: none;
    align-items: center;
    gap: .5rem;
}

@media (min-width: 768px) {
    .header-user { display: flex; }
}

.header-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold-muted);
    border: 1px solid rgba(185,154,69,.35);
    color: var(--gold);
    font-weight: 700;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-username {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-dark);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-logout-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-gray);
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .75rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}

.header-logout-btn:hover {
    color: var(--gold);
    background: var(--gold-muted);
}

.header-logout-btn span {
    display: none;
}

@media (min-width: 768px) {
    .header-logout-btn span { display: inline; }
}

/* -- Wrapper sidebar + main -- */
.app-layout {
    display: flex;
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--footer-height));
}

/* -- Sidebar -- */
.crma-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-white);
    border-right: 1px solid var(--gold-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 50;
    /* Oculta em mobile — abre via botão hambúrguer (ver .sidebar-toggle) */
    display: none;
}

@media (min-width: 768px) {
    .crma-sidebar { display: flex; }
}

/* -- Menu mobile (botão hambúrguer + fundo escuro) -- */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: .25rem;
    border: none;
    background: transparent;
    color: var(--gold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(185,154,69,.14); }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0,0,0,.5);
    z-index: 40;
}

@media (min-width: 768px) {
    .sidebar-toggle { display: none; }
    .sidebar-overlay { display: none !important; }
}

@media (max-width: 767px) {
    .sidebar-overlay.is-open { display: block; }
    .crma-sidebar.is-open {
        display: flex;
        width: min(84vw, 300px);
        box-shadow: 0 12px 40px rgba(0,0,0,.45);
    }
}

.sidebar-nav {
    flex: 1;
    padding: .75rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .825rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
    position: relative;
}

.sidebar-item:hover {
    background: var(--gold-muted);
    color: var(--text-dark);
}

.sidebar-item.active {
    background: var(--gold-muted);
    color: var(--gold);
    font-weight: 600;
}

.sidebar-item.active .sidebar-icon {
    color: var(--gold);
}

.sidebar-item.disabled {
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}

.sidebar-icon {
    width: 15px;
    height: 15px;
    color: inherit;
    flex-shrink: 0;
}

.sidebar-divider {
    height: 1px;
    background: var(--gold-border);
    margin: .5rem .5rem;
}

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .75rem;
    margin-top: .15rem;
}

.sidebar-badge-soon {
    margin-left: auto;
    font-size: .6rem;
    font-weight: 600;
    background: var(--gold-border);
    color: var(--text-gray);
    padding: .1rem .4rem;
    border-radius: 999px;
}

.sidebar-footer {
    border-top: 1px solid var(--gold-border);
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-version {
    font-size: .7rem;
    font-weight: 600;
    color: var(--gold);
}

.sidebar-footer-name {
    font-size: .65rem;
    color: var(--text-muted);
}

/* -- Conteúdo principal -- */
.app-main {
    flex: 1;
    overflow-y: auto;
    margin-left: 0;
}

@media (min-width: 768px) {
    .app-main { margin-left: var(--sidebar-width); }
}

.app-main-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2rem;
}

/* -- Footer -- */
.crma-footer {
    background: var(--bg-white);
    border-top: 1px solid var(--gold-border);
    padding: .45rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    color: var(--text-muted);
    margin-left: 0;
}

@media (min-width: 768px) {
    .crma-footer { margin-left: var(--sidebar-width); }
}

.footer-sep { color: var(--gold-border); }
.footer-version { color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------
   4. Login page
   --------------------------------------------------------------- */
.login-page {
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-container {
    width: 100%;
    max-width: 380px;
}

.login-card {
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
}

.login-monogram {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand-text {
    text-align: center;
}

.login-office-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.25;
}

.login-system-name {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.login-form { display: flex; flex-direction: column; gap: .25rem; }

.login-forgot {
    text-align: center;
    margin-top: .75rem;
}

.login-forgot-text {
    font-size: .72rem;
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
}

.login-footer {
    text-align: center;
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------------
   5. Cabeçalho de página
   --------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

.page-subtitle {
    font-size: .78rem;
    color: var(--text-gray);
    margin-top: .2rem;
}

/* ---------------------------------------------------------------
   6. Cards
   --------------------------------------------------------------- */
.card {
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-muted {
    background: var(--bg-muted);
}

.card-header {
    padding: .875rem 1.1rem .5rem;
    border-bottom: 1px solid var(--gold-border);
}

.card-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-dark);
}

.card-subtitle {
    font-size: .72rem;
    color: var(--text-gray);
    margin-top: .15rem;
    display: block;
}

.card-body {
    padding: 1rem 1.1rem;
}

.card-body-sm { padding: .75rem 1rem; }

/* Status cards */
.card-status {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.1rem;
}

.card-status-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-status-green  { background: var(--green-bg);  color: var(--green); }
.card-status-red    { background: var(--red-bg);    color: var(--red); }
.card-status-gold   { background: var(--gold-muted); color: var(--gold); }
.card-status-gray   { background: #f3f4f6; color: #6b7280; }

.card-status-body { flex: 1; min-width: 0; }
.card-status-label { font-size: .72rem; color: var(--text-gray); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.card-status-value { font-size: .9rem; font-weight: 700; color: var(--text-dark); margin-top: .1rem; }
.card-status-sub   { font-size: .7rem; color: var(--text-gray); margin-top: .05rem; }

/* Grid de cards */
.cards-grid {
    display: grid;
    gap: .875rem;
}

.cards-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------------------------------------------------------------
   7. Formulários
   --------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-input {
    width: 100%;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    font-size: .875rem;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-family: var(--font-sans);
}

.form-input::placeholder { color: var(--text-muted); }

.form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(185,154,69,.18);
}

.form-input-error { border-color: var(--red); }
.form-input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

.form-input-disabled {
    background: var(--bg-muted);
    color: var(--text-gray);
    cursor: not-allowed;
}

.form-hint {
    font-size: .7rem;
    color: var(--text-gray);
}

.form-hint-muted { color: var(--text-muted); }

.form-actions {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   8. Botões
   --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .825rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s, color .15s, box-shadow .15s;
    text-decoration: none;
    font-family: var(--font-sans);
    line-height: 1.4;
}

.btn-primary {
    background: var(--gold);
    color: #fff;
}
.btn-primary:hover { background: var(--gold-dark); color: #fff; }

.btn-secondary {
    background: var(--bg-white);
    color: var(--text-gray);
    border: 1px solid var(--gold-border);
}
.btn-secondary:hover { background: var(--gold-muted); color: var(--text-dark); }

.btn-full { width: 100%; }

/* ---------------------------------------------------------------
   9. Alerts
   --------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    line-height: 1.45;
}

.alert-info    { background: var(--blue-bg);   border: 1px solid var(--blue-border);   color: var(--blue); }
.alert-success { background: var(--green-bg);  border: 1px solid var(--green-border);  color: var(--green); }
.alert-error   { background: var(--red-bg);    border: 1px solid var(--red-border);    color: var(--red); }
.alert-warning { background: var(--orange-bg); border: 1px solid var(--orange-border); color: var(--orange); }

/* ---------------------------------------------------------------
   10. Utilitários
   --------------------------------------------------------------- */
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }

.info-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--gold-border);
    font-size: .825rem;
}
.info-row:last-child { border-bottom: none; }
.info-label { font-weight: 600; color: var(--text-gray); min-width: 90px; flex-shrink: 0; }
.info-value { color: var(--text-dark); }
.info-note  { font-size: .72rem; color: var(--text-muted); }

/* Grid de módulos */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .625rem;
}

.module-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    background: var(--bg-muted);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
}

.module-icon { font-size: 1rem; }

.module-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.module-name { font-size: .8rem; font-weight: 600; color: var(--text-dark); }
.module-fase { font-size: .68rem; color: var(--text-gray); }

/* Badge */
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.badge-gold {
    background: var(--gold-muted);
    color: var(--gold-dark);
    border: 1px solid var(--gold-border);
}

/* Perfil */
.profile-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold-muted);
    border: 2px solid rgba(185,154,69,.35);
    color: var(--gold);
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------
   11. Tabelas (v0.2 — módulo Clientes)
   --------------------------------------------------------------- */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-md); }

.crma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.crma-table thead tr {
    background: var(--bg-muted);
    border-bottom: 2px solid var(--gold-border);
}

.crma-table th {
    padding: .6rem .875rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.crma-table td {
    padding: .7rem .875rem;
    border-bottom: 1px solid var(--gold-border);
    color: var(--text-dark);
    vertical-align: middle;
}

.crma-table tbody tr:last-child td { border-bottom: none; }

.crma-table tbody tr:hover td { background: var(--gold-muted); }

.table-footer {
    padding: .5rem .875rem;
    font-size: .72rem;
    color: var(--text-gray);
    border-top: 1px solid var(--gold-border);
}

.table-link {
    color: var(--text-dark);
    font-weight: 600;
}
.table-link:hover { color: var(--gold); }

.col-actions { width: 100px; }

/* Colunas responsivas */
@media (max-width: 640px) {
    .hide-sm { display: none; }
}
@media (max-width: 900px) {
    .hide-md { display: none; }
}
@media (max-width: 1100px) {
    .hide-lg { display: none; }
}

/* Action buttons dentro da tabela */
.table-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-border);
    background: var(--bg-white);
    color: var(--text-gray);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    text-decoration: none;
}

.action-btn:hover { background: var(--gold-muted); color: var(--gold); border-color: var(--gold); }

.action-btn-warning:hover  { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-border); }
.action-btn-success:hover  { background: var(--green-bg);  color: var(--green);  border-color: var(--green-border); }

/* ---------------------------------------------------------------
   12. Status badges (v0.2)
   --------------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Clientes */
.status-ativo   { background: var(--green-bg);  color: var(--green);    border: 1px solid var(--green-border); }
.status-inativo { background: #f3f4f6;           color: #6b7280;         border: 1px solid #d1d5db; }

/* Casos (v0.3) */
.status-caso-ativo     { background: var(--green-bg);  color: var(--green);   border: 1px solid var(--green-border); }
.status-caso-suspenso  { background: var(--orange-bg); color: var(--orange);  border: 1px solid var(--orange-border); }
.status-caso-encerrado { background: #f3f4f6;           color: #6b7280;        border: 1px solid #d1d5db; }
.status-caso-arquivado { background: #f1f5f9;           color: #475569;        border: 1px solid #cbd5e1; }

/* Ordens de Serviço (v0.6) */
.status-os-rascunho     { background: #f3f4f6;           color: #6b7280;        border: 1px solid #d1d5db; }
.status-os-aberta       { background: var(--blue-bg);    color: var(--blue);    border: 1px solid var(--blue-border); }
.status-os-em_execucao  { background: var(--gold-muted); color: var(--gold);    border: 1px solid var(--gold-border); }
.status-os-concluida    { background: var(--green-bg);   color: var(--green);   border: 1px solid var(--green-border); }
.status-os-cancelada    { background: #fee2e2;           color: #b91c1c;        border: 1px solid #fecaca; }
.status-os-arquivada    { background: #e2e8f0;           color: #334155;        border: 1px solid #cbd5e1; }

/* text-xs util */
.text-xs { font-size: .7rem; }
.mt-0    { margin-top: 0; }

/* ---------------------------------------------------------------
   17. Badges de prioridade (v0.4)
   --------------------------------------------------------------- */
.prio-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.prio-baixa   { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.prio-media   { background: var(--blue-bg);   color: var(--blue);   border: 1px solid var(--blue-border); }
.prio-alta    { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }
.prio-urgente { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-border); }

/* Radio de prioridade com cor */
.prio-opt-baixa.radio-selected   { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.prio-opt-media.radio-selected   { background: var(--blue-bg);   border-color: var(--blue);   color: var(--blue); }
.prio-opt-alta.radio-selected    { background: var(--orange-bg); border-color: var(--orange); color: var(--orange); }
.prio-opt-urgente.radio-selected { background: var(--red-bg);    border-color: var(--red);    color: var(--red); }

/* ---------------------------------------------------------------
   18. Status badges de tarefas (v0.4)
   --------------------------------------------------------------- */
.status-task-pendente  { background: var(--blue-bg);   color: var(--blue);   border: 1px solid var(--blue-border); }
.status-task-andamento { background: var(--gold-muted); color: var(--gold);  border: 1px solid var(--gold-border); }
.status-task-concluida { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-border); }
.status-task-cancelada { background: #f3f4f6;           color: #6b7280;       border: 1px solid #d1d5db; }
.status-task-arquivada { background: #f1f5f9;           color: #475569;       border: 1px solid #cbd5e1; }

/* ---------------------------------------------------------------
   19. Vencidas — highlight de linha e badge (v0.4)
   --------------------------------------------------------------- */
.tr-vencida td { background: #fff5f5 !important; }
.tr-vencida:hover td { background: #fee2e2 !important; }

.badge-vencida {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: 999px;
    padding: .05rem .45rem;
    margin-left: .4rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.text-vencida { color: var(--red) !important; font-weight: 600; }

/* card-status-red, orange */
.card-status-red    { background: var(--red-bg);    color: var(--red); }
.card-status-orange { background: var(--orange-bg); color: var(--orange); }

/* ---------------------------------------------------------------
   20. Modo Hoje (v0.5 — refinado)
   --------------------------------------------------------------- */

/* ---- Cabeçalho da página ---- */
.hoje-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gold-border);
}

.hoje-page-header-left { flex: 1; min-width: 0; }

.hoje-page-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: .2rem;
}

.hoje-page-data {
    font-size: .95rem;
    font-weight: 600;
    color: var(--gold-dark);
    margin-bottom: .1rem;
}

.hoje-page-usuario {
    font-size: .8rem;
    color: var(--text-gray);
}

.hoje-page-header-right {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Cards de resumo ---- */
.hoje-resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .625rem;
}

.hoje-resumo-card {
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: .75rem .875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}

.hoje-resumo-card:hover { border-color: var(--gold); }

.hoje-resumo-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}

.hoje-resumo-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-gray);
}

.hoje-resumo-link {
    font-size: .65rem;
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    margin-top: .1rem;
}
.hoje-resumo-link:hover { text-decoration: underline; }

/* Variações de cor para os cards de resumo */
.hoje-resumo-card-red     { border-color: var(--red-border);    background: var(--red-bg); }
.hoje-resumo-card-red .hoje-resumo-num { color: var(--red); }

.hoje-resumo-card-gold    { border-color: var(--gold-border);   background: var(--gold-muted); }
.hoje-resumo-card-gold .hoje-resumo-num { color: var(--gold-dark); }

.hoje-resumo-card-blue    { border-color: var(--blue-border);   background: var(--blue-bg); }
.hoje-resumo-card-blue .hoje-resumo-num { color: var(--blue); }

.hoje-resumo-card-green   { border-color: var(--green-border);  background: var(--green-bg); }
.hoje-resumo-card-green .hoje-resumo-num { color: var(--green); }

.hoje-resumo-card-orange  { border-color: var(--orange-border); background: var(--orange-bg); }
.hoje-resumo-card-orange .hoje-resumo-num { color: var(--orange); }

/* ---- Blocos de seção ---- */
.hoje-bloco {
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Barra colorida esquerda via border-left — sobrescrita por variantes */
    border-left-width: 4px;
    border-left-color: var(--gold-border);
}

.hoje-bloco-header {
    padding: .875rem 1.1rem .625rem;
    border-bottom: 1px solid var(--gold-border);
    background: var(--bg-muted);
}

.hoje-bloco-titulo-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}

.hoje-bloco-titulo {
    font-size: .9rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.01em;
}

.hoje-bloco-subtitulo {
    font-size: .75rem;
    color: var(--text-gray);
    margin: 0;
}

.hoje-bloco-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--text-gray);
}

.hoje-bloco-icon-ok     { color: var(--green); }
.hoje-bloco-icon-red    { color: var(--red); }
.hoje-bloco-icon-gold   { color: var(--gold); }
.hoje-bloco-icon-blue   { color: var(--blue); }
.hoje-bloco-icon-green  { color: var(--green); }
.hoje-bloco-icon-orange { color: var(--orange); }

.hoje-bloco-count {
    font-size: .7rem;
    font-weight: 700;
    background: var(--gold-muted);
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    padding: .12rem .55rem;
    color: var(--text-gray);
    white-space: nowrap;
}

.hoje-bloco-count-red    { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.hoje-bloco-count-orange { background: var(--orange-bg); border-color: var(--orange-border); color: var(--orange); }

.hoje-bloco-ok-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--green);
}

/* Variantes de bloco — barra lateral colorida */
.hoje-bloco-atencao  { border-left-color: var(--red); }
.hoje-bloco-ok       { border-left-color: var(--green); }
.hoje-bloco-proximos { border-left-color: var(--blue); }
.hoje-bloco-andamento{ border-left-color: var(--gold); }
.hoje-bloco-casos    { border-left-color: var(--green); }
.hoje-bloco-suspensos{ border-left-color: var(--orange); }

/* Header tinted para Atenção imediata */
.hoje-bloco-atencao .hoje-bloco-header {
    background: #fff8f8;
    border-bottom-color: var(--red-border);
}

/* Header tinted para tudo-em-dia */
.hoje-bloco-ok .hoje-bloco-header {
    background: var(--green-bg);
    border-bottom-color: var(--green-border);
}

/* ---- Empty state dentro de bloco ---- */
.hoje-bloco-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    color: var(--text-gray);
    font-size: .82rem;
    text-align: center;
}
.hoje-bloco-empty svg { color: var(--text-muted); opacity: .6; }
.hoje-bloco-empty a   { color: var(--gold); }

.hoje-bloco-empty-ok {
    background: var(--green-bg);
    color: var(--green);
}
.hoje-bloco-empty-ok svg { color: var(--green); opacity: 1; }

/* ---- Sub-blocos dentro de Atenção ---- */
.hoje-sub-bloco {
    border-top: 1px dashed var(--gold-border);
}
.hoje-sub-bloco:first-of-type { border-top: none; }

.hoje-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1.1rem .3rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(0,0,0,.025);
}

.hoje-sub-head-red    { color: var(--red);    background: rgba(220,38,38,.04); border-bottom: 1px solid var(--red-border); }
.hoje-sub-head-orange { color: var(--orange); background: rgba(234,88,12,.04); border-bottom: 1px solid var(--orange-border); }
.hoje-sub-head-gold   { color: var(--gold);   background: rgba(185,154,69,.06); border-bottom: 1px solid var(--gold-border); }

.hoje-sub-count {
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .45rem;
    background: rgba(0,0,0,.07);
}

/* ---- Lista de tarefas ---- */
.hoje-tcard-list {
    display: flex;
    flex-direction: column;
}

/* Card de tarefa individual */
.hoje-tcard {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: .2rem .75rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--gold-border);
    transition: background .1s;
}
.hoje-tcard:last-child { border-bottom: none; }
.hoje-tcard:hover      { background: #fdfcf8; }

.hoje-tcard-vencida        { background: #fff8f8; }
.hoje-tcard-vencida:hover  { background: #fff0f0; }

.hoje-tcard-header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

.hoje-tcard-titulo {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    line-height: 1.3;
    transition: color .12s;
}
.hoje-tcard-titulo:hover { color: var(--gold); }

.hoje-tcard-badges {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.hoje-tcard-meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .75rem;
    margin-top: .05rem;
}

.hoje-tcard-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--text-gray);
}

.hoje-tcard-link {
    color: var(--text-gray);
    text-decoration: none;
    transition: color .12s;
}
.hoje-tcard-link:hover { color: var(--gold); text-decoration: underline; }

.hoje-tcard-prazo       { color: var(--text-gray); }
.hoje-tcard-prazo-vencido { color: var(--red); font-weight: 700; }

.hoje-tcard-actions {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .25rem;
    padding-top: .1rem;
    align-self: center;
}

.hoje-tcard-form { display: inline-flex; }

.hoje-tcard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-border);
    background: var(--bg-white);
    color: var(--text-gray);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.hoje-tcard-btn:hover { background: var(--gold-muted); color: var(--gold); border-color: var(--gold); }

.hoje-tcard-btn-ok { border-color: var(--green-border); color: var(--green); background: var(--green-bg); }
.hoje-tcard-btn-ok:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ---- Lista de casos ---- */
.hoje-caso-list {
    display: flex;
    flex-direction: column;
}

.hoje-caso-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--gold-border);
    transition: background .1s;
}
.hoje-caso-row:last-child { border-bottom: none; }
.hoje-caso-row:hover      { background: #fdfcf8; }

.hoje-caso-row-suspenso        { background: var(--orange-bg); }
.hoje-caso-row-suspenso:hover  { background: #fff3e0; }

.hoje-caso-info { flex: 1; min-width: 0; }

.hoje-caso-titulo {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: .3rem;
    transition: color .12s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 480px;
}
.hoje-caso-titulo:hover { color: var(--gold); }

.hoje-caso-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
}

/* ---- Atalhos do rodapé ---- */
.hoje-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .875rem 0;
    border-top: 1px solid var(--gold-border);
    margin-top: .5rem;
}

/* ---- Cards de alerta legados (compatibilidade) ---- */
.card-alert         { border-color: var(--red-border); }
.card-alert-orange  { border-color: var(--orange-border); }

.tipo-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .68rem;
    font-weight: 600;
    background: var(--gold-muted);
    color: var(--gold-dark);
    border: 1px solid var(--gold-border);
}

/* ---------------------------------------------------------------
   13. Filtros / Busca (v0.2)
   --------------------------------------------------------------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
}

.filter-search {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: .7rem;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem .5rem 2.1rem;
    font-size: .85rem;
    color: var(--text-dark);
    background: var(--bg-white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,154,69,.18); }

.filter-group { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.filter-select {
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-size: .82rem;
    color: var(--text-dark);
    background: var(--bg-white);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}
.filter-select:focus { border-color: var(--gold); }

.btn-sm { padding: .35rem .875rem; font-size: .78rem; }
.btn-ghost { background: transparent; color: var(--text-gray); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--gold-muted); color: var(--text-dark); border-color: var(--gold-border); }
.btn-warning { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }
.btn-warning:hover { background: var(--orange); color: #fff; }
.btn-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.btn-success:hover { background: var(--green); color: #fff; }

/* ---------------------------------------------------------------
   14. Estado vazio (v0.2)
   --------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
}

.empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.empty-title { font-size: .9rem; color: var(--text-gray); }

/* ---------------------------------------------------------------
   15. Formulário de cliente — seções (v0.2)
   --------------------------------------------------------------- */
.client-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-section {
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.form-section-header {
    padding: .75rem 1.1rem;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--gold-border);
}

.form-section-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-section-number {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-section-body { padding: 1.1rem; }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-bottom: .875rem;
}
.form-row:last-child { margin-bottom: 0; }

.form-col       { flex: 1; min-width: 180px; }
.form-col-full  { flex: 1 0 100%; }
.form-col-short { flex: 0 0 120px; min-width: 100px; }

.form-required { color: var(--red); margin-left: .2rem; }
.form-label-error { color: var(--red); font-size: .7rem; font-weight: 400; }

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .875rem 0;
    border-top: 1px solid var(--gold-border);
}

/* Radio group */
.radio-group {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .875rem;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.radio-option:hover { background: var(--gold-muted); }
.radio-option input[type=radio] { margin: 0; cursor: pointer; }
.radio-selected { background: var(--gold-muted); border-color: var(--gold); color: var(--gold); font-weight: 600; }

/* Error list in alert */
.error-list { margin: .35rem 0 0 1rem; display: flex; flex-direction: column; gap: .2rem; }
.error-list li { font-size: .82rem; }

/* ---------------------------------------------------------------
   16. View de cliente — grid de cards (v0.2)
   --------------------------------------------------------------- */
.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .875rem;
}

.breadcrumb {
    font-size: .78rem;
    color: var(--text-gray);
    margin-bottom: .3rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.breadcrumb a { color: var(--gold); }
.breadcrumb-sep { color: var(--text-muted); }

.header-actions {
    display: flex;
    gap: .625rem;
    align-items: center;
    flex-wrap: wrap;
}

.ml-2 { margin-left: .5rem; }
.mt-1 { margin-top: .25rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.text-sm   { font-size: .82rem; }
.text-gray { color: var(--text-gray); }
.text-mono { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .02em; }
.font-medium { font-weight: 500; }

/* card-status-link */
.card-status-link {
    font-size: .7rem;
    color: var(--gold);
    text-decoration: none;
    display: inline-block;
    margin-top: .2rem;
}
.card-status-link:hover { text-decoration: underline; }

/* Module item ativo */
.module-item-ativo {
    background: var(--green-bg);
    border-color: var(--green-border);
}
.module-fase-ativo { color: var(--green); font-weight: 600; }
.module-link { text-decoration: none; }
.module-link:hover { color: var(--gold); text-decoration: underline; }

/* Cards 3 colunas */
.cards-grid-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ============================================================
   Calculadora de prazo (formulário de tarefa)
   ============================================================ */
.prazo-calc {
    background: var(--gold-muted);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin: 0 0 1.1rem;
}
.prazo-calc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .9rem;
    margin-bottom: .8rem;
}
.prazo-calc-head strong { color: var(--gold-dark); font-size: .98rem; }
.prazo-calc-djen {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: 6px;
    padding: .55rem .7rem;
    margin-bottom: .8rem;
    font-size: .88rem;
    color: var(--text-mid);
}
.prazo-calc-djen strong { color: var(--green); }
.prazo-calc-result {
    margin-top: .9rem;
    padding: .8rem .9rem;
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-size: .92rem;
}
.prazo-calc-result.is-erro {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red);
}
.prazo-calc-result .pc-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .2rem 0;
}
.prazo-calc-result .pc-line strong { color: var(--text-dark); }
.prazo-calc-result .pc-cumpr {
    border-top: 1px dashed var(--gold-border);
    margin-top: .3rem;
    padding-top: .45rem;
}
.prazo-calc-result .pc-cumpr strong { color: var(--gold-dark); }
.prazo-calc-result .pc-extenso {
    color: var(--text-gray);
    font-size: .85rem;
    margin-top: .25rem;
    text-transform: capitalize;
}
.prazo-calc-result .pc-ok {
    color: var(--green);
    font-size: .85rem;
    font-weight: 600;
    margin-top: .5rem;
}

/* ============================================================
   Copiloto de IA (bolinha flutuante + painel de chat)
   ============================================================ */
.copiloto-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #1a1a1a;
    color: var(--gold-light);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.copiloto-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.copiloto-fab.is-open { background: var(--gold-dark); color: #fff; }

.copiloto-panel {
    position: fixed;
    right: 22px;
    bottom: 88px;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1200;
}
/* Garante que o atributo [hidden] realmente esconda o painel
   (a regra .copiloto-panel acima usa display:flex e venceria o [hidden]). */
.copiloto-panel[hidden] { display: none !important; }
.copiloto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    background: #1a1a1a;
    color: #fff;
    border-top: 3px solid var(--gold);
}
.copiloto-head-title { display: flex; align-items: center; gap: .5rem; font-size: .98rem; }
.copiloto-badge {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    background: var(--gold-light);
    padding: .1rem .4rem;
    border-radius: 4px;
    font-weight: 700;
}
.copiloto-close {
    background: none; border: none; color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.copiloto-close:hover { color: var(--gold-light); }

.copiloto-body {
    flex: 1;
    overflow-y: auto;
    padding: .9rem;
    background: var(--bg-muted);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.copiloto-msg {
    max-width: 85%;
    padding: .55rem .75rem;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.4;
    word-wrap: break-word;
}
.copiloto-msg.bot {
    align-self: flex-start;
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}
.copiloto-msg.user {
    align-self: flex-end;
    background: var(--gold);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.copiloto-thinking { display: flex; gap: 4px; align-items: center; }
.copiloto-thinking span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-light);
    animation: copilotoBlink 1.2s infinite ease-in-out both;
}
.copiloto-thinking span:nth-child(2) { animation-delay: .2s; }
.copiloto-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes copilotoBlink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }

.copiloto-form {
    display: flex;
    gap: .5rem;
    padding: .6rem .7rem;
    border-top: 1px solid var(--gold-border);
    background: var(--bg-white);
}
.copiloto-input {
    flex: 1;
    border: 1px solid var(--gold-border);
    border-radius: 20px;
    padding: .55rem .9rem;
    font-size: .9rem;
    outline: none;
}
.copiloto-input:focus { border-color: var(--gold); }
.copiloto-send {
    width: 40px; height: 40px; flex-shrink: 0;
    border: none; border-radius: 50%;
    background: var(--gold); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.copiloto-send:hover { background: var(--gold-dark); }
.copiloto-send:disabled { opacity: .5; cursor: default; }
.copiloto-foot {
    padding: .4rem .7rem .6rem;
    font-size: .72rem;
    color: var(--text-gray);
    background: var(--bg-white);
    text-align: center;
}

/* Card de confirmação de ação (Onda B) */
.copiloto-card {
    max-width: 95% !important;
    background: var(--gold-muted) !important;
    border: 1px solid var(--gold) !important;
    border-bottom-left-radius: 12px !important;
}
.copiloto-card .cc-titulo {
    font-weight: 700;
    color: var(--gold-dark);
    font-size: .9rem;
    margin-bottom: .25rem;
}
.copiloto-card .cc-resumo {
    color: var(--text-dark);
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .6rem;
}
.copiloto-card .cc-acoes { display: flex; gap: .5rem; }
.copiloto-card .cc-btn {
    border: none;
    border-radius: 8px;
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.copiloto-card .cc-ok { background: var(--green); color: #fff; }
.copiloto-card .cc-ok:hover { filter: brightness(.95); }
.copiloto-card .cc-no { background: var(--bg-white); color: var(--text-mid); border: 1px solid var(--gold-border); }
.copiloto-card .cc-btn:disabled { opacity: .55; cursor: default; }
.copiloto-card.cc-feito .cc-acoes { display: none; }
.copiloto-card .cc-status {
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-dark);
}
.copiloto-card .cc-status a { color: var(--gold-dark); text-decoration: underline; }

/* Rascunho de mensagem / Briefing (Onda C) */
.copiloto-draft, .copiloto-briefing {
    max-width: 95% !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--gold-border) !important;
}
.copiloto-draft .cc-titulo, .copiloto-briefing .cc-titulo {
    font-weight: 700;
    color: var(--gold-dark);
    font-size: .9rem;
    margin-bottom: .4rem;
}
.copiloto-draft .cd-texto, .copiloto-briefing .cd-texto {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text-dark);
    background: var(--bg-muted);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    padding: .55rem .7rem;
    max-height: 320px;
    overflow-y: auto;
}
.copiloto-draft .cc-acoes, .copiloto-briefing .cc-acoes {
    display: flex; gap: .5rem; margin-top: .55rem;
}
.copiloto-draft .cc-btn, .copiloto-briefing .cc-btn {
    border: none; border-radius: 8px;
    padding: .4rem .9rem; font-size: .85rem; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-block;
}
.copiloto-draft .cc-copiar, .copiloto-briefing .cc-copiar {
    background: var(--gold); color: #fff;
}
.copiloto-draft .cc-copiar:hover, .copiloto-briefing .cc-copiar:hover { background: var(--gold-dark); }
.copiloto-draft .cc-wa {
    background: #25D366; color: #fff;
}
.copiloto-draft .cc-wa:hover { filter: brightness(.96); }

/* ------------------------------------------------------------
   Modo ENCAIXADO (desktop): o painel vira uma coluna fixa à
   direita e EMPURRA a tela para a esquerda (como a extensão do
   Claude no Chrome), em vez de sobrepor. No celular continua
   flutuando (não se aplica esta media query).
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .crma-header { transition: right .18s ease; }
    .app-main    { transition: margin-right .18s ease; }

    .copiloto-panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: 380px;
        max-width: 380px;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        border-left: 1px solid var(--gold-border);
        box-shadow: -6px 0 22px rgba(0,0,0,.10);
    }

    /* Alinha o cabeçalho do painel com a barra preta da página:
       mesma altura, mesmo preto e o filete dourado embaixo (não em cima),
       para o preto e o dourado ficarem numa linha contínua. */
    .copiloto-head {
        height: var(--header-height);
        box-sizing: border-box;
        background: #161616;
        border-top: none;
        border-bottom: 2px solid #B99A45;
    }

    /* Quando aberto (classe no body), abre espaço encolhendo o
       cabeçalho fixo e empurrando o conteúdo. */
    body.copiloto-docked .crma-header  { right: 380px; }
    body.copiloto-docked .app-main     { margin-right: 380px; }
    body.copiloto-docked .copiloto-fab { display: none; }
}

@media (max-width: 480px) {
    .copiloto-panel {
        right: 8px; left: 8px; bottom: 80px;
        width: auto; max-width: none;
    }
    .copiloto-fab { right: 16px; bottom: 16px; }
}

/* ============================================================
   Busca de vínculo da tarefa (Processo/Demanda OU OS)
   ============================================================ */
.vinc-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--gold-muted);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .92rem;
    color: var(--text-dark);
    margin-bottom: .5rem;
}
.vinc-chip.is-empty { color: var(--text-light); font-style: italic; background: var(--bg-muted); }
.vinc-trocar {
    background: none; border: none; cursor: pointer;
    color: var(--gold-dark); font-size: .82rem; font-weight: 600; text-decoration: underline;
    flex-shrink: 0;
}
.vinc-busca-wrap { position: relative; }
.vinc-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: var(--bg-white);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    max-height: 340px;
    overflow-y: auto;
    z-index: 50;
}
.vinc-cli {
    padding: .45rem .7rem .25rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gold-dark);
    background: var(--bg-muted);
    border-top: 1px solid var(--gold-border);
}
.vinc-cli:first-child { border-top: none; }
.vinc-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    font-size: .88rem;
    color: var(--text-dark);
    cursor: pointer;
    border-top: 1px solid var(--bg-muted);
}
.vinc-item:hover { background: var(--gold-muted); }
.vinc-tag {
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: 4px;
}
.vinc-tag-proc { background: #E8EEF9; color: #2C5BA8; }
.vinc-tag-os   { background: var(--gold-muted); color: var(--gold-dark); }
.vinc-empty { padding: .6rem .7rem; font-size: .84rem; color: var(--text-gray); }