/* ============================================================
   Nine MK — Agenda (agenda.ninemk.com)
   Mesma identidade visual do comercial.ninemk.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --preto:          #0b0a08;
    --preto-suave:    #16140f;
    --preto-elevado:  #1d1a13;
    --linha:          #2c2820;
    --linha-forte:    #3a3527;
    --creme:          #f3ede0;
    --creme-suave:    #a89d87;
    --dourado:        #c9a227;
    --dourado-suave:  #e3c15a;
    --dourado-fraco:  rgba(201, 162, 39, 0.12);
    --erro:           #c15b52;
    --erro-fraco:     rgba(193, 91, 82, 0.14);
    --sucesso:        #7c9a6a;
    --sucesso-fraco:  rgba(124, 154, 106, 0.14);

    --fonte-titulo: 'Big Shoulders Display', sans-serif;
    --fonte-corpo:  'Inter', sans-serif;
    --fonte-mono:   'IBM Plex Mono', monospace;

    --raio: 10px;
    --raio-pequeno: 6px;
    --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse at top left, rgba(201,162,39,0.05), transparent 55%),
        var(--preto);
    color: var(--creme);
    font-family: var(--fonte-corpo);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Em espaços estreitos (painel docado, celular) o gradiente radial
   fica com faixas estranhas — melhor fundo liso nesses casos */
@media (max-width: 460px) {
    body { background: var(--preto); }
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: 0.3px; margin: 0; color: var(--creme); }
h1 { font-size: clamp(22px, 3vw, 30px); }
p { margin: 0; }
a { color: inherit; }
code, .mono { font-family: var(--fonte-mono); }

input[type="radio"], input[type="checkbox"] { accent-color: var(--dourado); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
}

/* ---------- Auth ---------- */

.card-auth {
    position: relative;
    background: var(--preto-suave);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    padding: 44px 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--sombra);
}

.card-auth::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-image: repeating-linear-gradient(90deg, var(--dourado) 0px, var(--dourado) 1px, transparent 1px, transparent 10px);
    opacity: 0.55;
    pointer-events: none;
}

.pagina-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.card-auth h1 { font-size: 26px; text-align: center; margin-bottom: 24px; }
.destaque { color: var(--dourado); }
.card-auth form { display: flex; flex-direction: column; gap: 18px; }
.card-auth label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--creme-suave); }
.card-auth input { background: var(--preto); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); padding: 11px 12px; color: var(--creme); font-family: var(--fonte-corpo); font-size: 14px; }
.card-auth input:focus { outline: none; border-color: var(--dourado); }

/* ---------- Botões ---------- */

.btn-dourado {
    background: var(--dourado); color: var(--preto); border: none; border-radius: var(--raio-pequeno);
    padding: 12px 20px; font-family: var(--fonte-corpo); font-weight: 600; font-size: 13px;
    cursor: pointer; text-align: center; text-decoration: none; display: inline-block;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-dourado:hover { background: var(--dourado-suave); box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25); }
.btn-dourado:active { transform: translateY(1px); }

.btn-secundario {
    background: transparent; color: var(--creme); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno);
    padding: 9px 16px; font-family: var(--fonte-corpo); font-weight: 500; font-size: 13px; cursor: pointer;
    text-decoration: none; display: inline-block; transition: border-color 0.15s, color 0.15s;
}
.btn-secundario:hover { border-color: var(--dourado); color: var(--dourado-suave); }

.btn-icone {
    background: none; border: 1px solid var(--linha-forte); color: var(--creme-suave); border-radius: var(--raio-pequeno);
    padding: 5px 9px; font-size: 12px; font-family: var(--fonte-corpo); cursor: pointer; line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.btn-icone:hover { border-color: var(--dourado); color: var(--dourado); }
.btn-icone.excluir:hover { border-color: var(--erro); color: var(--erro); }

.msg-erro { background: var(--erro-fraco); border: 1px solid var(--erro); color: #e3a49f; padding: 11px 15px; border-radius: var(--raio-pequeno); font-size: 13px; margin-bottom: 16px; }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px; border-bottom: 1px solid var(--linha);
    background: var(--preto-suave); position: sticky; top: 0; z-index: 20;
}

.topbar .marca { display: flex; align-items: baseline; gap: 8px; }
.topbar h1 { font-size: 20px; }

.topbar-acoes { display: flex; align-items: center; gap: 14px; }
.topbar-usuario { font-size: 12px; color: var(--creme-suave); }

/* ============================================================
   Barra de navegação flutuante (estilo Trello)
   ============================================================ */

.nav-flutuante {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 2px;
    background: var(--preto-elevado); border: 1px solid var(--linha-forte); border-radius: 999px;
    padding: 6px; box-shadow: var(--sombra); z-index: 50;
}

.nav-flutuante-item {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    color: var(--creme-suave); text-decoration: none;
    padding: 9px 16px; border-radius: 999px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    border: none; background: none; cursor: pointer;
}

.nav-flutuante-item svg { width: 15px; height: 15px; flex-shrink: 0; }

.nav-flutuante-item:hover { color: var(--creme); background: var(--preto-suave); }

.nav-flutuante-item.ativo {
    color: var(--dourado-suave); background: var(--dourado-fraco);
    box-shadow: inset 0 -2px 0 var(--dourado);
}

@media (max-width: 620px) {
    .nav-flutuante-item span { display: none; }
    .nav-flutuante-item { padding: 10px 13px; }
}

/* ============================================================
   Painel docado — Caixa de Entrada / Planejador lado a lado
   com o conteúdo principal (não sobrepõe nada)
   ============================================================ */

.app-linha { display: flex; min-height: calc(100vh - 61px); }

.app-conteudo { flex: 1; min-width: 0; overflow-x: auto; }

.painel-docado {
    flex: 0 0 auto; width: 0; overflow: hidden; white-space: nowrap;
    border-right: 1px solid var(--linha); background: var(--preto-suave);
    display: flex; flex-direction: column;
    transition: width 0.2s ease;
}
.painel-docado.aberto { width: min(380px, 86vw); }

.painel-docado-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--linha); flex: 0 0 auto;
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px;
    letter-spacing: 0.3px; color: var(--creme); width: min(380px, 86vw);
}

.painel-docado iframe {
    border: none; height: 100%; background: var(--preto);
    width: min(380px, 86vw); flex: 1;
}

@media (max-width: 760px) {
    .painel-docado.aberto { width: 100vw; }
    .painel-docado-cabecalho, .painel-docado iframe { width: 100vw; }
}

/* ============================================================
   Central — painéis lado a lado, redimensionáveis
   ============================================================ */

.central-wrap { height: 100vh; display: flex; flex-direction: column; }

.central-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; border-bottom: 1px solid var(--linha); background: var(--preto-suave); flex: 0 0 auto;
}
.central-topbar h1 { font-size: 18px; }

.central-paineis { flex: 1; display: flex; min-height: 0; }

.painel {
    display: flex; flex-direction: column; min-width: 220px; overflow: hidden;
}
.painel iframe { flex: 1; border: none; width: 100%; height: 100%; background: var(--preto); }

.redimensionador {
    flex: 0 0 6px; width: 6px; cursor: col-resize; background: var(--linha);
    position: relative; transition: background 0.15s;
}
.redimensionador::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 2px; height: 28px; background: var(--linha-forte); border-radius: 2px;
}
.redimensionador:hover, .redimensionador.arrastando { background: var(--dourado-fraco); }
.redimensionador:hover::after, .redimensionador.arrastando::after { background: var(--dourado); }

.central-aviso-mobile {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; text-align: center; padding: 32px; gap: 16px; color: var(--creme-suave); font-size: 14px;
}

@media (max-width: 900px) {
    .central-paineis { display: none; }
    .central-aviso-mobile { display: flex; }
}

/* ============================================================
   Caixa de Entrada
   ============================================================ */

.caixa-wrap { padding: 22px 28px 90px; max-width: 480px; }
.caixa-wrap.sem-nav-flutuante { padding-bottom: 22px; }

.caixa-coluna { display: flex; flex-direction: column; gap: 14px; }

.caixa-add-rapido input {
    width: 100%; background: var(--preto-suave); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno);
    padding: 12px 14px; color: var(--creme); font-family: var(--fonte-corpo); font-size: 14px;
    transition: border-color 0.15s;
}
.caixa-add-rapido input:focus { outline: none; border-color: var(--dourado); }

.caixa-lista { display: flex; flex-direction: column; gap: 8px; }

.caixa-vazia { color: var(--creme-suave); font-size: 13px; padding: 10px 2px; }

.enviar-quadro { display: flex; gap: 8px; }
.enviar-quadro select { flex: 1; text-transform: none; }
.enviar-quadro .btn-secundario { flex: 0 0 auto; }

/* ============================================================
   Quadro Kanban
   ============================================================ */

.quadro-wrap { padding: 22px 28px 90px; overflow-x: auto; }
.quadro-wrap.sem-nav-flutuante { padding-bottom: 22px; }

/* ---------- Cabeçalho compacto (quando a página está embutida num painel) ---------- */

.painel-cabecalho-mini {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid var(--linha);
    background: var(--preto-suave); position: sticky; top: 0; z-index: 20;
    font-family: var(--fonte-corpo); font-weight: 700; font-size: 12px;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--creme-suave);
}
.painel-cabecalho-mini .btn-icone { padding: 3px 8px; font-size: 12px; }

.quadro {
    display: flex; align-items: flex-start; gap: 16px; min-height: calc(100vh - 140px);
}

.lista {
    flex: 0 0 272px; width: 272px;
    background: var(--preto-suave); border: 1px solid var(--linha);
    border-radius: var(--raio); display: flex; flex-direction: column;
    max-height: calc(100vh - 160px);
}

.lista-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px 10px; border-bottom: 1px solid var(--linha);
}

.lista-titulo {
    display: flex; align-items: center; gap: 8px; font-family: var(--fonte-corpo);
    font-weight: 700; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--creme);
    flex: 1; min-width: 0;
}

.lista-titulo input {
    background: transparent; border: none; color: var(--creme); font-family: var(--fonte-corpo);
    font-weight: 700; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase; width: 100%;
    padding: 3px 4px; border-radius: 4px;
}
.lista-titulo input:focus { outline: none; background: var(--preto); }

.lista-contador {
    font-family: var(--fonte-mono); font-size: 11px; color: var(--creme-suave);
    background: var(--preto-elevado); padding: 2px 7px; border-radius: 10px;
}

.lista-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 40px; }

.lista-corpo.arrastando-sobre { background: var(--dourado-fraco); border-radius: 8px; }

.lista-rodape { padding: 8px 10px 12px; }
.lista-add-card {
    width: 100%; background: none; border: 1px dashed var(--linha-forte); color: var(--creme-suave);
    border-radius: var(--raio-pequeno); padding: 8px; font-size: 12px; cursor: pointer; text-align: left;
    transition: border-color 0.15s, color 0.15s;
}
.lista-add-card:hover { border-color: var(--dourado); color: var(--dourado-suave); }

.card {
    background: var(--preto-elevado); border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
    padding: 10px 12px; cursor: grab; position: relative; transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover { border-color: var(--linha-forte); box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
.card.arrastando { opacity: 0.4; }
.card.concluido .card-titulo { text-decoration: line-through; color: var(--creme-suave); }

.card-cor { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0; }

.card-titulo { font-size: 13px; font-weight: 500; color: var(--creme); word-break: break-word; }

.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.card-prazo {
    font-family: var(--fonte-mono); font-size: 10.5px; color: var(--creme-suave);
    background: var(--preto); border: 1px solid var(--linha); padding: 2px 7px; border-radius: 5px;
    display: inline-flex; align-items: center; gap: 4px;
}
.card-prazo.atrasado { color: #e3a49f; border-color: var(--erro); }
.card-prazo.hoje { color: var(--dourado-suave); border-color: var(--dourado); }

.lista-add-nova {
    flex: 0 0 272px; width: 272px; background: transparent; border: 1px dashed var(--linha-forte);
    border-radius: var(--raio); color: var(--creme-suave); padding: 12px; cursor: pointer; font-size: 13px;
    height: 44px; transition: border-color 0.15s, color 0.15s;
}
.lista-add-nova:hover { border-color: var(--dourado); color: var(--dourado-suave); }

/* ---------- Modal de card ---------- */

.modal-fundo {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none;
    align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 100; overflow-y: auto;
}
.modal-fundo.aberto { display: flex; }

.modal-card {
    position: relative; background: var(--preto-suave); border: 1px solid var(--linha);
    border-radius: var(--raio); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    width: 100%; max-width: 480px; padding: 28px; box-shadow: var(--sombra);
}
.modal-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background-image: repeating-linear-gradient(90deg, var(--dourado) 0px, var(--dourado) 1px, transparent 1px, transparent 10px);
    opacity: 0.55; pointer-events: none;
}

.modal-card h3 { font-size: 18px; margin-bottom: 18px; }
.modal-card form { display: flex; flex-direction: column; gap: 16px; }
.modal-card label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--creme-suave); }
.modal-card input, .modal-card textarea, .modal-card select {
    background: var(--preto); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno);
    padding: 10px 12px; color: var(--creme); font-family: var(--fonte-corpo); font-size: 14px; text-transform: none; resize: vertical;
}
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { outline: none; border-color: var(--dourado); }
.modal-card textarea { min-height: 80px; }

.linha-dupla { display: flex; gap: 12px; }
.linha-dupla > label { flex: 1; }

.cor-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cor-opcao {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
}
.cor-opcao:hover { transform: scale(1.1); }
.cor-opcao.selecionada { border-color: var(--creme); }

.modal-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.modal-rodape-direita { display: flex; gap: 8px; }

.check-concluido { display: flex; flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 13px; color: var(--creme); }

@media (max-width: 720px) {
    .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lista, .lista-add-nova { flex: 0 0 84vw; width: 84vw; }
    .quadro-wrap { padding: 16px; }
    .card-auth { padding: 32px 24px; }
}