/* ============================================================================
   INTÁTICA CORE — design system inspirado no ITMB Core.
   Tema dark/light via [data-theme]. Tema padrão: dark.
   ============================================================================ */

:root {
    /* paleta base (light) */
    --core-primary:#1453F0;
    --core-primary-hover:#0B3FC0;
    --core-accent:#00BFFF;
    --core-ink:#0F2440;
    --core-ink-hover:#1b3c6b;
    --core-bg:#FFFFFF;
    --core-bg-soft:#F5F7FB;
    --core-bg-muted:#EEF2F8;
    --core-border:#E3E9F2;
    --core-border-strong:#CDD7E6;
    --core-text:#0E1B2C;
    --core-text-soft:#4A5A70;
    --core-text-muted:#8493A8;
    --core-success:#18E27A;
    --core-danger:#E0463E;
    --core-warning:#E8A317;

    /* sidebar (sempre escura nos dois temas, padrão ITMB) */
    --core-d-bg:#071B36;
    --core-d-bg-elev:#0D2748;
    --core-d-bg-high:#143360;
    --core-d-border:rgba(255,255,255,.08);
    --core-d-text:#FFFFFF;
    --core-d-text-soft:#B5C2D4;

    --font-display:'Sora','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --radius-md:12px;
    --radius-lg:16px;
    --side-w:248px;
    --top-h:68px;
    --shadow-sm:0 1px 2px rgba(16,32,64,.06);
    --shadow-md:0 8px 24px rgba(16,32,64,.10);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --core-bg:#11161e;
    --core-bg-soft:#0a0e14;
    --core-bg-muted:#1a212c;
    --core-border:#232c3a;
    --core-border-strong:#324053;
    --core-text:#e6eaf0;
    --core-text-soft:#c5cdda;
    --core-text-muted:#8b97a8;
    --core-ink:#1453f0;
    --core-ink-hover:#3a6bff;
    --core-d-bg:#0c1118;
    --core-d-bg-elev:#11161e;
    --core-d-bg-high:#1a212c;
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body { height:100%; }

body {
    font-family:var(--font-body);
    color:var(--core-text);
    background:var(--core-bg-soft);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
    line-height:1.5;
}

h1, h2, h3, h4 {
    font-family:var(--font-display);
    letter-spacing:-.01em;
    color:var(--core-text);
}

h1 { font-size:26px; font-weight:700; }
h2 { font-size:22px; font-weight:700; }
h3 { font-size:18px; font-weight:600; }
h4 { font-size:15px; font-weight:600; }

a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ============================================================================
   SIDEBAR
   ============================================================================ */

.side {
    position:fixed;
    top:0; left:0;
    width:var(--side-w);
    height:100vh;
    background:var(--core-d-bg);
    color:var(--core-d-text-soft);
    display:flex;
    flex-direction:column;
    padding:20px 16px;
    gap:14px;
    z-index:30;
}

.side__brand {
    padding:8px 4px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
}

.side__brand img {
    max-height:44px;
    max-width:100%;
    width:auto;
    display:block;
}

.side__nav {
    display:flex;
    flex-direction:column;
    gap:3px;
    flex:1;
    overflow:auto;
}

.side__nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:10px;
    color:var(--core-d-text-soft);
    font-weight:500;
    font-size:14px;
    transition:background .15s, color .15s;
}

.side__nav a:hover {
    background:rgba(255,255,255,.05);
    color:#fff;
}

.side__nav a.ativo,
.side__nav a.is-active {
    background:rgba(20,83,240,.22);
    color:#fff;
}

.side__nav a.ativo svg,
.side__nav a.is-active svg {
    color:var(--core-accent);
}

.side__nav svg {
    flex:0 0 auto;
    opacity:.9;
}

.side__label {
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(181,194,212,.6);
    padding:10px 12px 4px;
}

.side__user {
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 8px 4px;
    border-top:1px solid var(--core-d-border);
}

.side__av {
    width:38px; height:38px;
    border-radius:50%;
    background:var(--core-d-bg-high);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:600;
    font-size:13px;
    flex:0 0 auto;
}

.side__user b {
    color:#fff;
    font-size:14px;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:130px;
}

.side__user small {
    color:var(--core-d-text-soft);
    font-size:12px;
    text-transform:capitalize;
}

/* ============================================================================
   MAIN / TOPBAR
   ============================================================================ */

.app__main {
    margin-left:var(--side-w);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar {
    position:sticky;
    top:0;
    z-index:20;
    height:var(--top-h);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--core-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:0 28px;
}

[data-theme="dark"] .topbar {
    background:rgba(10,14,20,.85);
}

.search {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--core-bg-soft);
    border:1px solid var(--core-border);
    border-radius:999px;
    padding:10px 16px;
    width:min(380px, 42vw);
    color:var(--core-text-muted);
}

.search input {
    border:0;
    background:none;
    outline:none;
    font-family:inherit;
    font-size:14px;
    color:var(--core-text);
    width:100%;
}

.topbar__r {
    display:flex;
    align-items:center;
    gap:12px;
}

.icon-btn {
    width:40px; height:40px;
    border-radius:10px;
    background:#fff;
    border:1px solid var(--core-border);
    display:grid;
    place-items:center;
    color:var(--core-text-soft);
    cursor:pointer;
    transition:background .15s, color .15s, border-color .15s;
}

.icon-btn:hover {
    background:var(--core-bg-muted);
    color:var(--core-text);
}

[data-theme="dark"] .icon-btn {
    background:var(--core-bg);
    border-color:var(--core-border);
    color:var(--core-text-soft);
}

[data-theme="dark"] .icon-btn:hover {
    border-color:var(--core-accent);
    color:var(--core-accent);
    box-shadow:0 0 0 3px rgba(0,191,255,.10);
}

.th-sun { display:none; }
[data-theme="dark"] .th-sun { display:block; }
[data-theme="dark"] .th-moon { display:none; }

/* user menu (dropdown no topbar) */
.user-menu { position:relative; }

.user-menu__btn {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    list-style:none;
    padding:5px 12px 5px 5px;
    border-radius:999px;
    border:1px solid var(--core-border);
    background:#fff;
    color:var(--core-text-soft);
}

.user-menu__btn::-webkit-details-marker { display:none; }
.user-menu__btn::marker { content:''; }

[data-theme="dark"] .user-menu__btn {
    background:var(--core-bg);
    border-color:var(--core-border);
}

.user-menu__name {
    font-size:13.5px;
    font-weight:600;
    color:var(--core-text);
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-menu[open] .user-menu__btn {
    border-color:var(--core-border-strong);
    background:var(--core-bg-soft);
}

.user-menu__dd {
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    background:#fff;
    border:1px solid var(--core-border);
    border-radius:12px;
    box-shadow:var(--shadow-md);
    min-width:240px;
    padding:6px;
    z-index:40;
}

[data-theme="dark"] .user-menu__dd {
    background:var(--core-bg);
    border-color:var(--core-border);
}

.user-menu__dd a,
.user-menu__logout {
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    color:var(--core-text);
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
    font-family:inherit;
}

.user-menu__dd a:hover,
.user-menu__logout:hover {
    background:var(--core-bg-soft);
}

.user-menu__logout { color:var(--core-danger); }

.user-menu__sep {
    height:1px;
    background:var(--core-border);
    margin:6px 4px;
}

.user-menu__label {
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--core-text-muted);
    padding:8px 12px 4px;
}

@media (max-width:760px) {
    .user-menu__name { display:none; }
}

/* ============================================================================
   CONTEÚDO
   ============================================================================ */

.content {
    padding:28px;
    max-width:1280px;
    width:100%;
    flex:1;
}

/* compat: classe antiga .conteudo continua sendo usada em algumas views */
.conteudo { display:none; }

.page-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:22px;
    flex-wrap:wrap;
}

.page-head p {
    color:var(--core-text-muted);
    font-size:14px;
    margin-top:4px;
}

/* topo-pagina (legado) — alias do page-head */
.topo-pagina {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:22px;
    flex-wrap:wrap;
}

.acoes-topo {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* breadcrumb */
.breadcrumb {
    color:var(--core-text-muted);
    font-size:13px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.breadcrumb a {
    color:var(--core-text-muted);
    text-decoration:none;
}

.breadcrumb a:hover {
    color:var(--core-primary);
}

[data-theme="dark"] .breadcrumb a:hover {
    color:var(--core-accent);
}

.breadcrumb strong {
    color:var(--core-text);
    font-weight:600;
}

/* ============================================================================
   FLASH / ALERTAS
   ============================================================================ */

.flash,
.alerta {
    padding:12px 16px;
    border-radius:var(--radius-md);
    margin-bottom:18px;
    font-size:14px;
    font-weight:500;
}

.flash-ok,
.alerta.sucesso {
    background:rgba(24,226,122,.12);
    color:#0b7a47;
    border:1px solid rgba(24,226,122,.3);
}

.flash-erro,
.alerta.erro {
    background:rgba(224,70,62,.10);
    color:#b42318;
    border:1px solid rgba(224,70,62,.3);
}

[data-theme="dark"] .flash-ok,
[data-theme="dark"] .alerta.sucesso {
    color:#6ee7b7;
}

[data-theme="dark"] .flash-erro,
[data-theme="dark"] .alerta.erro {
    color:#fca5a5;
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    padding:20px;
    margin-bottom:16px;
}

.card__h {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    gap:12px;
}

.card__h h4 {
    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
}

.card__h a {
    color:var(--core-primary);
    font-size:13px;
    font-weight:600;
}

[data-theme="dark"] .card__h a {
    color:var(--core-accent);
}

/* glow nos cards no tema escuro (efeito Cadence/ITMB) */
[data-theme="dark"] .card,
[data-theme="dark"] .metric {
    position:relative;
    background:rgba(12,14,22,.72);
    box-shadow:0 8px 30px rgba(0,0,0,.30),
               inset 0 26px 30px -28px rgba(0,191,255,.32);
    transition:transform .3s ease, box-shadow .3s ease;
}

[data-theme="dark"] .card::before,
[data-theme="dark"] .metric::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(160deg,
        rgba(0,191,255,.40),
        rgba(0,191,255,.05) 40%,
        transparent 60%,
        rgba(20,83,240,.25));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:1;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .metric:hover {
    transform:translateY(-2px);
    box-shadow:0 20px 52px rgba(0,191,255,.10),
               0 0 0 1px rgba(0,191,255,.14),
               inset 0 26px 30px -28px rgba(0,191,255,.38);
}

/* cantos com accent (flourish do escuro) */
[data-theme="dark"] .card::after,
[data-theme="dark"] .metric::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:2;
    opacity:.45;
    background:
        linear-gradient(var(--core-accent),var(--core-accent)) no-repeat left 9px top 9px/12px 1.5px,
        linear-gradient(var(--core-accent),var(--core-accent)) no-repeat left 9px top 9px/1.5px 12px,
        linear-gradient(var(--core-accent),var(--core-accent)) no-repeat right 9px bottom 9px/12px 1.5px,
        linear-gradient(var(--core-accent),var(--core-accent)) no-repeat right 9px bottom 9px/1.5px 12px;
}

/* card-children precisam ficar acima dos pseudo-elementos */
.card > * { position:relative; z-index:3; }

/* grid de duas colunas usado nas telas de cliente */
.grid-cliente {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}

.status-box {
    background:var(--core-bg-soft);
    border:1px solid var(--core-border);
    padding:14px;
    border-radius:var(--radius-md);
    margin-bottom:12px;
}

/* ============================================================================
   BOTÕES
   ============================================================================ */

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:600;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    background:var(--core-ink);
    color:#fff;
    transition:background .15s, transform .15s, box-shadow .15s;
}

.btn:hover {
    background:var(--core-ink-hover);
}

.btn-secundario,
.btn--secondary {
    background:transparent;
    border:1px solid var(--core-border-strong);
    color:var(--core-text);
}

.btn-secundario:hover,
.btn--secondary:hover {
    background:var(--core-bg-muted);
    color:var(--core-text);
}

.btn-perigo,
.link-perigo {
    background:rgba(224,70,62,.10) !important;
    color:#b42318 !important;
    border:1px solid rgba(224,70,62,.3) !important;
}

.btn-perigo:hover,
.link-perigo:hover {
    background:rgba(224,70,62,.18) !important;
}

[data-theme="dark"] .btn-perigo,
[data-theme="dark"] .link-perigo {
    color:#fca5a5 !important;
}

.btn--sm {
    padding:7px 14px;
    font-size:13px;
}

.btn-login {
    width:100%;
    padding:12px 20px;
    font-size:15px;
}

/* ============================================================================
   TABELAS
   ============================================================================ */

table {
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

th {
    text-align:left;
    font-size:11.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--core-text-muted);
    padding:12px 16px;
    border-bottom:1px solid var(--core-border);
}

td {
    padding:14px 16px;
    border-bottom:1px solid var(--core-border);
    color:var(--core-text);
    vertical-align:middle;
}

tr:last-child td { border-bottom:0; }

tbody tr:hover td {
    background:var(--core-bg-soft);
}

[data-theme="dark"] tbody tr:hover td {
    background:var(--core-bg-muted);
}

td small, small {
    color:var(--core-text-muted);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-padrao,
form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-uma-coluna {
    grid-template-columns:1fr;
}

.form-grupo {
    display:flex;
    flex-direction:column;
}

.form-grupo label,
form label {
    color:var(--core-text-soft);
    font-size:13px;
    font-weight:600;
    margin-bottom:7px;
}

.form-grupo input,
.form-grupo select,
.form-grupo textarea,
form input,
form select,
form textarea {
    width:100%;
    height:42px;
    background:var(--core-bg);
    color:var(--core-text);
    padding:0 14px;
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}

.form-grupo textarea,
form textarea {
    height:auto;
    padding:12px 14px;
    min-height:90px;
    resize:vertical;
    line-height:1.5;
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
    border-color:var(--core-primary);
    box-shadow:0 0 0 3px rgba(20,83,240,.18);
}

[data-theme="dark"] .form-grupo input:focus,
[data-theme="dark"] .form-grupo select:focus,
[data-theme="dark"] .form-grupo textarea:focus,
[data-theme="dark"] form input:focus,
[data-theme="dark"] form select:focus,
[data-theme="dark"] form textarea:focus {
    border-color:var(--core-accent);
    box-shadow:0 0 0 3px rgba(0,191,255,.18);
}

.form-full {
    grid-column:1 / -1;
}

.form-acoes {
    grid-column:1 / -1;
    display:flex;
    gap:12px;
    margin-top:10px;
    flex-wrap:wrap;
}

.form-busca {
    display:flex;
    gap:10px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.form-busca input,
.form-busca select {
    flex:1;
    min-width:160px;
    height:38px;
}

/* date picker no tema escuro */
[data-theme="dark"] input[type="date"] {
    color-scheme:dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor:pointer;
    opacity:.7;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter:invert(1);
    opacity:.85;
}

/* checkboxes/radios em linha */
.radio-inline {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--core-text-soft);
    font-weight:500;
}

.radio-inline input {
    width:auto;
    height:auto;
}

/* ============================================================================
   BADGES & STATUS
   ============================================================================ */

.badge {
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:1.5;
}

.status-aberto,
.status-cliente-cancelado {
    background:rgba(224,70,62,.10);
    color:#b42318;
}

.status-em_andamento {
    background:rgba(20,83,240,.10);
    color:var(--core-primary);
}

.status-aguardando_cliente,
.status-aguardando_terceiro,
.status-cliente-pausado {
    background:rgba(232,163,23,.12);
    color:#9a6c0e;
}

.status-concluido,
.status-cliente-ativo {
    background:rgba(24,226,122,.12);
    color:#0b7a47;
}

.status-cancelado {
    background:var(--core-bg-muted);
    color:var(--core-text-muted);
}

.prioridade-urgente {
    background:#b42318;
    color:#fff;
}

.prioridade-alta {
    background:rgba(224,70,62,.10);
    color:#b42318;
}

.prioridade-normal {
    background:rgba(20,83,240,.10);
    color:var(--core-primary);
}

.prioridade-baixa {
    background:var(--core-bg-muted);
    color:var(--core-text-muted);
}

[data-theme="dark"] .status-aberto,
[data-theme="dark"] .status-cliente-cancelado,
[data-theme="dark"] .prioridade-alta { color:#fca5a5; }

[data-theme="dark"] .status-em_andamento,
[data-theme="dark"] .prioridade-normal { color:#93c5fd; }

[data-theme="dark"] .status-aguardando_cliente,
[data-theme="dark"] .status-aguardando_terceiro,
[data-theme="dark"] .status-cliente-pausado { color:#fcd34d; }

[data-theme="dark"] .status-concluido,
[data-theme="dark"] .status-cliente-ativo { color:#6ee7b7; }

[data-theme="dark"] .status-cancelado,
[data-theme="dark"] .prioridade-baixa { color:#cbd5e1; }

/* status social */
.status-social-ideia { background:var(--core-bg-muted); color:var(--core-text-muted); }
.status-social-em_producao { background:rgba(20,83,240,.10); color:var(--core-primary); }
.status-social-arte_pronta { background:rgba(0,191,255,.12); color:#0a7298; }
.status-social-aguardando_aprovacao { background:rgba(232,163,23,.12); color:#9a6c0e; }
.status-social-aprovado { background:rgba(24,226,122,.12); color:#0b7a47; }
.status-social-agendado { background:rgba(127,119,221,.16); color:#5a52b5; }
.status-social-publicado { background:rgba(16,185,129,.18); color:#065f46; }
.status-social-cancelado { background:rgba(224,70,62,.10); color:#b42318; }

[data-theme="dark"] .status-social-ideia { color:#cbd5e1; }
[data-theme="dark"] .status-social-em_producao { color:#93c5fd; }
[data-theme="dark"] .status-social-arte_pronta { color:#7dd3fc; }
[data-theme="dark"] .status-social-aguardando_aprovacao { color:#fcd34d; }
[data-theme="dark"] .status-social-aprovado { color:#6ee7b7; }
[data-theme="dark"] .status-social-agendado { color:#c4b5fd; }
[data-theme="dark"] .status-social-publicado { color:#6ee7b7; }
[data-theme="dark"] .status-social-cancelado { color:#fca5a5; }

/* ============================================================================
   DASHBOARD — métricas
   ============================================================================ */

.cards-dashboard {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-bottom:22px;
}

.card-metrica,
.metric {
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    padding:18px;
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:transform .18s, box-shadow .18s, border-color .18s;
}

.card-metrica:hover,
.metric:hover {
    border-color:var(--core-border-strong);
}

.card-metrica span,
.metric__l {
    color:var(--core-text-muted);
    font-size:13px;
    font-weight:500;
    text-transform:none;
    letter-spacing:0;
    margin-bottom:0;
    display:block;
}

.card-metrica strong,
.metric__v {
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:30px;
    margin:6px 0 0;
    color:var(--core-text);
}

.card-metrica.alerta strong {
    color:var(--core-danger);
}

[data-theme="dark"] .card-metrica.alerta strong {
    color:#fca5a5;
}

/* contagem em pílula (relativa a card-metrica > * ficou z-index:3 no dark) */
.metric > * { position:relative; z-index:3; }

/* cards do dashboard social */
.cards-dashboard-social {
    display:grid;
    grid-template-columns:repeat(5, minmax(150px, 1fr));
    gap:14px;
    margin-bottom:22px;
}

.card-social {
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    padding:16px 18px;
    text-decoration:none;
    color:inherit;
    display:block;
}

.card-social small {
    display:block;
    color:var(--core-text-muted);
    margin-bottom:8px;
    font-size:12px;
}

.card-social strong {
    font-size:24px;
    color:var(--core-text);
    font-weight:700;
    line-height:1;
    font-family:var(--font-display);
}

/* ============================================================================
   AÇÕES & DROPDOWNS
   ============================================================================ */

.acoes-tabela {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.link-acao {
    font-size:12.5px;
    font-weight:600;
    text-decoration:none;
    color:var(--core-text-soft);
    background:#fff;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--core-border-strong);
    cursor:pointer;
    font-family:inherit;
    transition:background .15s;
}

.link-acao:hover {
    background:var(--core-bg-muted);
}

.link-acao.destaque {
    background:var(--core-primary);
    color:#fff;
    border-color:var(--core-primary);
}

.link-acao.destaque:hover {
    background:var(--core-primary-hover);
}

[data-theme="dark"] .link-acao {
    background:var(--core-bg);
    color:var(--core-text);
}

/* dropdown de ações (botão "Ações ▾" na listagem de clientes) */
.dropdown-acoes {
    position:relative;
    display:inline-block;
}

.dropdown-menu {
    position:absolute;
    top:calc(100% + 4px);
    right:0;
    min-width:220px;
    background:#fff;
    border:1px solid var(--core-border);
    border-radius:12px;
    padding:6px;
    box-shadow:var(--shadow-md);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .16s, visibility .16s, transform .16s;
    z-index:10;
}

.dropdown-menu.aberto {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Variante: abre pra CIMA quando não tem espaço embaixo (perto do fim do viewport) */
.dropdown-menu.subir {
    top:auto;
    bottom:calc(100% + 4px);
    transform:translateY(4px);
}
.dropdown-menu.subir.aberto {
    transform:translateY(0);
}

.dropdown-menu a {
    display:block;
    padding:10px 12px;
    color:var(--core-text);
    text-decoration:none;
    font-size:14px;
    border-radius:8px;
    transition:background .12s;
}

.dropdown-menu a:hover {
    background:var(--core-bg-soft);
}

.dropdown-menu a.destaque {
    background:var(--core-primary);
    color:#fff;
    margin-top:2px;
}

.dropdown-menu a.destaque:hover {
    background:var(--core-primary-hover);
}

.dropdown-divider {
    height:1px;
    background:var(--core-border);
    margin:6px 4px;
}

[data-theme="dark"] .dropdown-menu {
    background:var(--core-bg);
    border-color:var(--core-border);
}

/* ============================================================================
   ABAS DE CLIENTE (sub-páginas) & abas de status
   ============================================================================ */

.cliente-tabs {
    display:inline-flex;
    gap:4px;
    background:var(--core-bg-muted);
    padding:4px;
    border-radius:999px;
    margin-bottom:22px;
    flex-wrap:wrap;
}

.cliente-tab {
    padding:8px 18px;
    color:var(--core-text-soft);
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    border-radius:999px;
    white-space:nowrap;
    transition:background .15s, color .15s;
}

.cliente-tab:hover {
    color:var(--core-text);
}

.cliente-tab.ativa {
    background:#fff;
    color:var(--core-text);
    box-shadow:var(--shadow-sm);
}

[data-theme="dark"] .cliente-tab.ativa {
    background:var(--core-bg);
    color:var(--core-text);
}

.abas-status {
    display:flex;
    gap:8px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.aba-status {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:var(--core-bg);
    border:1px solid var(--core-border);
    color:var(--core-text-soft);
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    transition:background .15s, border-color .15s, color .15s;
}

.aba-status:hover {
    border-color:var(--core-border-strong);
    color:var(--core-text);
}

.aba-status.aba-ativa {
    background:var(--core-primary);
    color:#fff;
    border-color:var(--core-primary);
}

.aba-contador {
    display:inline-block;
    padding:1px 9px;
    border-radius:999px;
    background:var(--core-bg-muted);
    font-size:11.5px;
    font-weight:700;
    min-width:22px;
    text-align:center;
    color:var(--core-text-muted);
}

.aba-status.aba-ativa .aba-contador {
    background:rgba(255,255,255,.22);
    color:#fff;
}

/* ============================================================================
   TIMELINE
   ============================================================================ */

.timeline {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.timeline-item {
    background:var(--core-bg-soft);
    border-left:3px solid var(--core-primary);
    padding:14px 16px;
    border-radius:var(--radius-md);
}

.timeline-meta {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    font-size:13px;
    color:var(--core-text);
}

.timeline-meta span {
    color:var(--core-text-muted);
}

[data-theme="dark"] .timeline-item {
    background:var(--core-bg-muted);
    border-left-color:var(--core-accent);
}

/* ============================================================================
   ACESSOS / SENHAS
   ============================================================================ */

.input-senha-tabela {
    width:160px;
    height:34px;
    padding:0 10px;
    background:var(--core-bg);
    color:var(--core-text);
    border:1px solid var(--core-border);
    border-radius:8px;
    margin-right:5px;
    font-family:inherit;
    font-size:13px;
}

.prazo-atrasado {
    color:var(--core-danger);
    font-weight:600;
}

[data-theme="dark"] .prazo-atrasado {
    color:#fca5a5;
}

/* ============================================================================
   CALENDÁRIO SOCIAL
   ============================================================================ */

.calendario-grid {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:10px;
}

.calendario-dia {
    min-height:130px;
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    padding:12px;
}

.calendario-numero {
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
    color:var(--core-text);
    font-family:var(--font-display);
}

.calendario-post {
    display:block;
    background:rgba(20,83,240,.08);
    border:1px solid rgba(20,83,240,.18);
    border-radius:10px;
    padding:8px 10px;
    text-decoration:none;
    margin-bottom:6px;
}

.calendario-post strong {
    display:block;
    font-size:11.5px;
    color:var(--core-primary);
    font-weight:600;
}

.calendario-post span {
    display:block;
    font-size:12.5px;
    color:var(--core-text);
    margin:3px 0;
}

.calendario-post em {
    font-size:11px;
    color:var(--core-text-muted);
    font-style:normal;
}

.calendario-dia small {
    color:var(--core-text-muted);
}

[data-theme="dark"] .calendario-post {
    background:rgba(0,191,255,.10);
    border-color:rgba(0,191,255,.22);
}

[data-theme="dark"] .calendario-post strong {
    color:var(--core-accent);
}

.form-status-rapido { display:block; }

.select-status-social {
    background:var(--core-bg);
    color:var(--core-text);
    border:1px solid var(--core-border);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.atalhos-periodo {
    display:flex;
    gap:8px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

/* ============================================================================
   ANEXOS DE SOLICITAÇÃO
   ============================================================================ */

.lista-anexos {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:12px;
}

.anexo-item {
    display:flex;
    gap:12px;
    align-items:center;
    background:var(--core-bg-soft);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    padding:12px;
    transition:border-color .15s;
}

.anexo-item:hover {
    border-color:var(--core-border-strong);
}

.anexo-preview {
    width:56px; height:56px;
    flex-shrink:0;
    background:var(--core-bg);
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--core-border);
}

.anexo-preview img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}

.anexo-icone {
    font-size:28px;
    line-height:1;
}

.anexo-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    overflow:hidden;
}

.anexo-nome {
    color:var(--core-text);
    text-decoration:none;
    font-weight:600;
    font-size:13.5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.anexo-nome:hover {
    color:var(--core-primary);
    text-decoration:underline;
}

[data-theme="dark"] .anexo-nome:hover {
    color:var(--core-accent);
}

.anexo-meta {
    color:var(--core-text-muted);
    font-size:11.5px;
}

.anexo-acoes {
    display:flex;
    flex-direction:column;
    gap:6px;
    flex-shrink:0;
}

/* ============================================================================
   GALERIA DE ARTES (FLUX/IA)
   ============================================================================ */

.lista-artes {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
}

.arte-item {
    position:relative;
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .18s, border-color .18s;
    display:flex;
    flex-direction:column;
}

.arte-item:hover {
    border-color:var(--core-border-strong);
    transform:translateY(-2px);
}

.arte-item.arte-selecionada {
    border-color:var(--core-success);
    box-shadow:0 0 0 2px rgba(24,226,122,.20);
}

.arte-thumb {
    display:block;
    aspect-ratio:1 / 1;
    background:var(--core-bg-soft);
    overflow:hidden;
}

.arte-thumb img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}

.arte-badge-selecionada {
    position:absolute;
    top:10px; right:10px;
    background:var(--core-success);
    color:#073;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.arte-meta {
    padding:10px 12px 4px;
    color:var(--core-text-muted);
    font-size:11px;
}

.arte-acoes {
    display:flex;
    gap:6px;
    padding:8px 12px 12px;
    flex-wrap:wrap;
}

.arte-acoes form,
.arte-acoes button {
    flex:1;
    min-width:80px;
}

.arte-acoes .link-acao {
    width:100%;
    text-align:center;
}

/* ============================================================================
   WHATSAPP-LIKE
   ============================================================================ */

.whats-app {
    display:grid;
    grid-template-columns:340px 1fr;
    gap:0;
    height:calc(100vh - 180px);
    min-height:560px;
    background:var(--core-bg);
    border:1px solid var(--core-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.whats-sidebar {
    border-right:1px solid var(--core-border);
    display:flex;
    flex-direction:column;
    background:var(--core-bg-soft);
}

.whats-sidebar-topo {
    padding:14px;
    border-bottom:1px solid var(--core-border);
}

.whats-busca {
    width:100%;
    background:var(--core-bg);
    color:var(--core-text);
    border:1px solid var(--core-border);
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
}

.whats-lista {
    flex:1;
    overflow-y:auto;
}

.whats-conversa {
    display:block;
    padding:13px 16px;
    border-bottom:1px solid var(--core-border);
    text-decoration:none;
    color:var(--core-text);
    transition:background .12s;
}

.whats-conversa:hover {
    background:var(--core-bg-muted);
}

.whats-conversa.ativa {
    background:rgba(20,83,240,.08);
    border-left:3px solid var(--core-primary);
}

.whats-conversa-nome {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
}

.whats-badge-nao-lidas {
    background:var(--core-success);
    color:#073;
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:999px;
    min-width:22px;
    text-align:center;
}

.whats-conversa-resumo {
    color:var(--core-text-muted);
    font-size:12px;
    line-height:1.4;
    margin-bottom:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.whats-conversa-meta {
    color:var(--core-text-muted);
    font-size:11px;
}

.whats-thread {
    display:flex;
    flex-direction:column;
    min-height:0;
    background:var(--core-bg-soft);
}

.whats-vazio {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--core-text-muted);
    text-align:center;
    padding:40px;
}

.whats-thread-topo {
    padding:14px 22px;
    border-bottom:1px solid var(--core-border);
    background:var(--core-bg);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.whats-mensagens {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.whats-msg {
    max-width:70%;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.whats-msg-esquerda { align-self:flex-start; }
.whats-msg-direita { align-self:flex-end; align-items:flex-end; }
.whats-msg-direita-operador { align-self:flex-end; align-items:flex-end; }

.whats-msg-rotulo {
    font-size:11px;
    color:var(--core-text-muted);
    font-weight:600;
    padding:0 8px;
}

.whats-msg-bolha {
    background:var(--core-bg);
    border:1px solid var(--core-border);
    padding:10px 14px;
    border-radius:16px;
    color:var(--core-text);
    font-size:14px;
    line-height:1.5;
    word-wrap:break-word;
}

.whats-msg-esquerda .whats-msg-bolha {
    border-bottom-left-radius:4px;
    background:var(--core-bg);
}

.whats-msg-direita .whats-msg-bolha {
    border-bottom-right-radius:4px;
    background:rgba(24,226,122,.10);
    border-color:rgba(24,226,122,.30);
}

.whats-msg-direita-operador .whats-msg-bolha {
    border-bottom-right-radius:4px;
    background:rgba(20,83,240,.10);
    border-color:rgba(20,83,240,.30);
}

[data-theme="dark"] .whats-msg-direita .whats-msg-bolha {
    background:rgba(24,226,122,.14);
    color:#d1fae5;
}

[data-theme="dark"] .whats-msg-direita-operador .whats-msg-bolha {
    background:rgba(0,191,255,.10);
    border-color:rgba(0,191,255,.30);
    color:#e0f2fe;
}

.whats-thread-rodape {
    padding:14px 22px;
    border-top:1px solid var(--core-border);
    background:var(--core-bg);
}

.whats-form-enviar {
    display:flex;
    gap:12px;
    align-items:flex-end;
}

.whats-form-enviar textarea {
    flex:1;
    height:auto;
    background:var(--core-bg-soft);
    color:var(--core-text);
    border:1px solid var(--core-border);
    border-radius:14px;
    padding:11px 14px;
    font-size:14px;
    font-family:inherit;
    resize:vertical;
    min-height:48px;
}

.whats-form-enviar .btn {
    padding:12px 24px;
    flex-shrink:0;
}

@media (max-width: 900px){
    .whats-app{
        grid-template-columns:1fr;
        height:auto;
    }
    .whats-sidebar{
        max-height:300px;
    }
    .whats-mensagens{
        min-height:400px;
    }
}

/* ============================================================================
   LOGIN
   ============================================================================ */

.login-body {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top right, rgba(20,83,240,.15), transparent 35%),
        radial-gradient(circle at bottom left, rgba(0,191,255,.10), transparent 35%),
        var(--core-d-bg);
    color:#fff;
    padding:24px;
}

.login-wrapper {
    width:100%;
    max-width:440px;
}

.login-card {
    background:rgba(13,39,72,.88);
    border:1px solid rgba(0,191,255,.18);
    border-radius:24px;
    padding:36px;
    box-shadow:0 30px 90px rgba(0,0,0,.40);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.login-brand {
    text-align:center;
    margin-bottom:26px;
}

.login-brand strong {
    display:block;
    font-family:var(--font-display);
    font-size:26px;
    font-weight:700;
    letter-spacing:.5px;
    color:#fff;
}

.login-brand span {
    display:block;
    color:var(--core-d-text-soft);
    font-size:13px;
    margin-top:4px;
}

.login-card h1 {
    font-size:22px;
    color:#fff;
    margin-bottom:8px;
}

.login-card p {
    color:var(--core-d-text-soft);
    font-size:14px;
    margin-bottom:22px;
}

.login-form {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.login-form label {
    color:#fff;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
    display:block;
}

.login-form input {
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    padding:0 14px;
    height:44px;
    width:100%;
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:border-color .15s, background .15s;
}

.login-form input:focus {
    border-color:var(--core-accent);
    background:rgba(255,255,255,.10);
    box-shadow:0 0 0 3px rgba(0,191,255,.18);
}

.login-options {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:4px 0 4px;
}

.login-options label {
    color:var(--core-d-text-soft);
    font-size:13px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
}

.login-options input[type="checkbox"] {
    width:16px; height:16px;
    cursor:pointer;
    accent-color:var(--core-accent);
}

.login-options a {
    color:var(--core-accent);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.login-options a:hover {
    text-decoration:underline;
}

.btn-login {
    background:var(--core-primary);
    color:#fff;
    border:0;
    border-radius:12px;
    margin-top:6px;
}

.btn-login:hover {
    background:var(--core-primary-hover);
}

.alerta-login {
    background:rgba(224,70,62,.14);
    color:#fca5a5;
    border:1px solid rgba(224,70,62,.30);
    padding:11px 14px;
    border-radius:12px;
    margin-bottom:16px;
    text-align:center;
    font-size:13.5px;
}

/* ============================================================================
   RESPONSIVO — sidebar vira menu mobile
   ============================================================================ */

.btn-hamburger {
    display:none;
    background:none;
    border:0;
    color:var(--core-text);
    width:40px; height:40px;
    border-radius:10px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    padding:0;
}

.btn-hamburger:hover {
    background:var(--core-bg-muted);
}

.overlay-sidebar {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:25;
    opacity:0;
    transition:opacity .25s;
}

.overlay-sidebar.ativo {
    display:block;
    opacity:1;
}

@media (max-width: 1024px) {
    :root { --side-w:0px; }

    .side {
        width:280px;
        transform:translateX(-100%);
        transition:transform .28s cubic-bezier(.4,0,.2,1);
        box-shadow:none;
    }

    .side.aberta {
        transform:translateX(0);
        box-shadow:8px 0 32px rgba(0,0,0,.4);
    }

    .app__main { margin-left:0; }

    .topbar { padding:0 16px; }

    .search { display:none; }

    .btn-hamburger { display:flex; }
}

@media (max-width: 768px) {
    .cards-dashboard { grid-template-columns:repeat(2, 1fr); gap:12px; }
    .cards-dashboard-social { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .form-padrao, form { grid-template-columns:1fr; }
    .topo-pagina, .page-head { flex-direction:column; align-items:flex-start; gap:12px; }
    .acoes-topo { flex-wrap:wrap; width:100%; }
    .calendario-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
    .calendario-dia { min-height:100px; padding:10px; }
    .form-busca { flex-direction:column; }
    .form-busca input, .form-busca select { width:100%; }
    .content { padding:20px 16px; }
    .grid-cliente { grid-template-columns:1fr; }
    table { font-size:13px; }
    th, td { padding:10px 12px; }
}

@media (max-width: 480px) {
    .content { padding:18px 12px; }
    .cards-dashboard, .cards-dashboard-social { grid-template-columns:1fr; }
    h1 { font-size:22px; }
    .calendario-grid { grid-template-columns:repeat(2, 1fr); }
    .login-card { padding:26px 20px; border-radius:18px; }
    .login-card h1 { font-size:20px; }
    .breadcrumb { flex-wrap:wrap; }
    .timeline-meta { flex-direction:column; gap:4px; }
}