/* zelo-ds.css — GERADO por bin/build.sh. NAO edite aqui; edite src/*.css. */
/* Camadas: tokens -> base -> components. Identidade Zelo (teal + Quicksand). */

/* Zelo Design System — TOKENS (cores, tipografia, raios, sombras).
   Fonte unica de verdade da identidade Zelo: teal #0C4448 + Quicksand.
   Extraido do zelo-tarefas (o app "mestre"). Sem amarelo, sem roxo. */

/* Fonte Quicksand auto-hospedada (nao depende do Google Fonts).
   Os .woff2 vivem em /assets/fonts/ de cada app (o sync.sh copia junto). */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/quicksand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/quicksand-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Marca */
    --teal: #0C4448;
    --teal-claro: #145a5f;
    --teal-escuro: #08322f;
    --teal-leve: #e7f1ef;

    /* Texto */
    --texto: #1f2d2e;
    --texto-suave: #6a787a;
    --texto-fraco: #69787a;

    /* Superficies e linhas */
    --borda: #e8eded;
    --borda-forte: #d7dede;
    --fundo: #f7f9f9;
    --branco: #ffffff;
    --hover: #f1f5f5;

    /* Semanticas / status */
    --erro: #b3261e;
    --erro-fundo: #fceeed;
    --ok-fundo: #e7f1ef;
    --hoje: #d56a00;       /* laranja: vence/comeca hoje */
    --azul: #1d5a8a;
    --ambar: #b07d1e;
    --verde: #3a7d5d;
    --mencao: #e0564a;

    /* Raios */
    --raio-xs: 4px;
    --raio-sm: 7px;
    --raio: 10px;          /* botoes / linhas */
    --raio-lg: 14px;       /* cards grandes / popovers */
    --raio-pill: 999px;

    /* Sombras */
    --sombra: 0 1px 3px rgba(12, 68, 72, 0.06), 0 6px 18px rgba(12, 68, 72, 0.05);
    --sombra-sm: 0 1px 2px rgba(12, 68, 72, 0.08);

    /* --- Aliases de compatibilidade ---------------------------------------
       Mantem o CSS ja existente nos apps funcionando durante a migracao.
       Codigo NOVO deve usar os nomes canonicos acima. */
    --raio-md: var(--raio);        /* Portal chama --raio-md o que aqui e --raio (10px) */
    --tinta:   var(--teal);        /* Paineis chamava a cor da marca de --tinta */
    --link:    var(--teal-claro);  /* Paineis chamava a cor de link de --link */
    --linha:   var(--borda);       /* Paineis chamava a borda de --linha */
    /* Obs.: --cinza NAO entra aqui de proposito: e "borda" (#E0E0E0) no Portal e
       "texto" (#5c6b6c) no Paineis (colisao de significado). Cada app mantem o seu. */
}

/* Zelo Design System — BASE (reset leve + elementos "crus").
   Aqui mora o conserto do "controle nativo feio": estilizamos os ELEMENTOS
   (button, select, input, textarea), nao so as classes. Assim um controle sem
   classe nao volta ao visual cru do navegador. Classes como .btn / .iconbtn
   (mais especificas) sempre vencem sobre estas regras de elemento. */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--texto);
    background: var(--fundo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); }
h1 { font-size: 21px; font-weight: 700; margin: 0; color: var(--teal-escuro); }

.muted { color: var(--texto-suave); font-size: 14px; }
.center { text-align: center; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.hint { font-size: 13px; color: var(--texto-suave); margin: 4px 0 14px; }

/* ============================ CAMPOS ============================ */
label { font-weight: 600; font-size: 14px; }

/* O grupo abaixo espelha EXATAMENTE o app.css do Tarefas (o mestre). Não adicionar
   outros type= aqui sem varrer os 3 apps: incluir p.ex. search/month deu width:100%
   em campos que os apps posicionam por conta própria (busca do Tarefas). */
input[type="email"], input[type="text"], input[type="password"],
input[type="date"], input[type="number"],
.select, textarea {
    width: 100%; padding: 11px 13px; font: inherit; color: var(--texto);
    background: var(--branco); border: 1.5px solid var(--borda-forte); border-radius: var(--raio-sm);
    transition: border-color .12s, box-shadow .12s;
}

/* Select "cru" (sem classe): ganha o visual do Zelo mas mantem a LARGURA NATURAL,
   para filtros e formularios em linha nao quebrarem. Use .select p/ largura total. */
select {
    font: inherit; color: var(--texto); background: var(--branco);
    border: 1.5px solid var(--borda-forte); border-radius: var(--raio-sm);
    padding: 9px 12px; cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, .select:focus, textarea:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 68, 72, 0.12);
}
textarea { resize: vertical; }
input[type="color"] { width: 54px; height: 42px; padding: 3px; border: 1.5px solid var(--borda-forte); border-radius: var(--raio-sm); background: #fff; cursor: pointer; }

input:disabled, select:disabled, textarea:disabled, .select:disabled { opacity: .6; cursor: not-allowed; background: var(--fundo); }

/* Campo de arquivo: troca o botao "Escolher arquivo" cinza nativo por um do Zelo.
   O botao usa seletor de ELEMENTO (input::file-selector-button) DE PROPOSITO:
   [type="file"] contaria como classe na especificidade e passaria por cima de
   classes do app (ex.: .anexo-add__input do Tarefas, botao teal-leve). So o
   max-width fica no [type="file"] (guarda de layout, ninguem disputa). */
input[type="file"] { max-width: 100%; }
input::file-selector-button {
    font: inherit; cursor: pointer; margin-right: 10px;
    border: 1.5px solid var(--borda-forte); background: var(--branco); color: var(--texto);
    border-radius: var(--raio-sm); padding: 7px 12px;
    transition: background .12s;
}
input::file-selector-button:hover { background: var(--hover); }

/* ============================ BOTAO "CRU" ============================
   Um <button> sem a classe .btn nao aparece mais como o cinza do sistema:
   herda a fonte, ganha borda/fundo do Zelo e cantos arredondados. Como e regra
   de ELEMENTO (baixa especificidade), qualquer .btn/.iconbtn a sobrescreve. */
button, input[type="submit"], input[type="button"], input[type="reset"] {
    font: inherit; cursor: pointer;
    border: 1.5px solid var(--borda-forte); background: var(--branco); color: var(--texto);
    border-radius: var(--raio-sm); padding: 8px 13px;
    transition: background .12s, border-color .12s;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { background: var(--hover); }

/* Zelo Design System — COMPONENTS (pecas reutilizaveis dos apps).
   So o que e compartilhado: botoes, campos-arranjo, alertas, tags, status,
   avatar, cards, tabela, estado-vazio, login. Componentes especificos de um
   app (ex.: .tasklist/.calpop do Tarefas, .kpi/.grid do Paineis) NAO entram
   aqui — ficam no app.css local de cada app. */

/* ============================ BOTOES ============================ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; text-align: center; font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; padding: 9px 15px; border-radius: var(--raio);
    border: 1.5px solid var(--borda-forte); background: var(--branco); color: var(--texto);
    transition: background .12s, color .12s, border-color .12s, transform .04s;
    white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--primary:hover { background: var(--teal-claro); border-color: var(--teal-claro); }
.btn--sm { padding: 6px 11px; font-size: 13px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--texto-suave); }
.btn--ghost:hover { background: var(--hover); color: var(--teal); }
.btn--danger { border-color: #e3c6c4; color: #a23b35; background: var(--branco); }
.btn--danger:hover { background: var(--erro-fundo); }

/* Botao-icone (acoes em linha) */
.iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: var(--raio-sm); border: 0; cursor: pointer;
    background: transparent; color: var(--texto-suave); font-size: 15px; text-decoration: none;
    transition: background .12s, color .12s;
}
.iconbtn:hover { background: var(--hover); color: var(--teal); }
.iconbtn--danger:hover { background: var(--erro-fundo); color: var(--erro); }

/* ============================ ARRANJO DE FORMULARIO ============================ */
.form { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.form-grid { display: flex; flex-direction: column; gap: 5px; max-width: 600px; }
.form-grid label { margin-top: 10px; }
.row-2 { display: flex; gap: 14px; flex-wrap: wrap; }
.row-2 > * { flex: 1; min-width: 190px; }
.check { display: flex; align-items: center; gap: 8px; width: 100%; font-weight: 500; font-size: 14px; margin: 8px 0; }
.check input { flex: none; width: auto; }
.select--sm { width: auto; min-width: 150px; padding: 7px 11px; font-size: 13px; }

/* ============================ ALERTAS / TAGS ============================ */
.alert { margin: 0 0 16px; padding: 11px 14px; border-radius: var(--raio-sm); font-size: 14px; }
.alert--ok  { background: var(--ok-fundo);  color: var(--teal-escuro); }
.alert--erro{ background: var(--erro-fundo); color: var(--erro); }
.alert--dev { background: var(--teal-leve); color: var(--teal-escuro); border: 1.5px dashed var(--teal); }
.alert--dev a { font-weight: 700; }

.tag { display: inline-block; padding: 3px 9px; border-radius: var(--raio-pill); font-size: 11px; font-weight: 700; }
.tag--on { background: var(--ok-fundo); color: var(--teal-escuro); }
.tag--off { background: #efe3e3; color: #9a4a45; }

/* Pills de status */
.status { display: inline-block; padding: 3px 10px; border-radius: var(--raio-pill); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.status--a_fazer { background: #eef2f2; color: #5c6b6c; }
.status--em_progresso { background: #e6f0fa; color: var(--azul); }
.status--aguardando_cliente { background: #f7eed9; color: var(--ambar); }
.status--concluida { background: var(--ok-fundo); color: var(--teal-escuro); }
.status--solid { color: #fff; }
.status--solid.status--a_fazer { background: #8c9b9c; }
.status--solid.status--em_progresso { background: var(--azul); }
.status--solid.status--aguardando_cliente { background: var(--ambar); }
.status--solid.status--concluida { background: var(--teal); }

/* Badge / etiqueta */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--raio-pill); background: var(--teal-leve); color: var(--teal-escuro); font-size: 12px; font-weight: 600; }
.badge--rec svg { display: block; }

/* ============================ AVATAR / PONTINHO ============================ */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--teal);
    color: #fff; font-weight: 700; font-size: 12px; flex: none; letter-spacing: .3px;
    overflow: hidden;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.avatar--empty { background: #fff; border: 1.5px dashed var(--borda-forte); color: var(--texto-fraco); font-weight: 700; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; }

/* ============================ CARD / LOGIN ============================ */
.card { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 26px; border: 1px solid var(--borda); }
/* Moldura NEUTRA de conteúdo: só largura/margem/padding. NUNCA definir display,
   min-height ou alinhamento aqui — apps usam .container como moldura de TODAS as
   telas (Portal: <main class="container">), e o flex+centralizar vazou e jogou o
   cabeçalho pra fora da tela nas telas cheias (incidente de 01/jul/2026). */
.container { width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 18px 40px; }
/* Variante SÓ para telas de autenticação (login): centraliza o cartão no meio da
   tela. Opt-in explícito: class="container container--auth". */
.container--auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.card--auth { max-width: 400px; margin: 0 auto; }
.card--auth .btn { width: 100%; justify-content: center; margin-top: 12px; padding: 12px; }
.brand { display: flex; flex-direction: column; line-height: 1; margin-bottom: 20px; }
.brand__mark { font-weight: 700; font-size: 30px; letter-spacing: .5px; color: var(--teal); }
.brand__sub { font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-suave); margin-top: 5px; }

/* ============================ TABELA ============================ */
.tbl { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-sm); }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: 14px; vertical-align: middle; }
.tbl th { background: #fafcfc; color: var(--texto-suave); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover, .tbl tr:hover { background: var(--hover); }

/* ============================ ESTADO VAZIO ============================ */
.empty { text-align: center; color: var(--texto-suave); padding: 36px 20px; background: var(--branco); border: 1.5px dashed var(--borda-forte); border-radius: var(--raio-lg); }
.empty__icon { font-size: 32px; margin-bottom: 8px; display: block; }
.empty__tit { display: block; color: var(--teal-escuro); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.empty p { margin: 0 0 14px; font-size: 13.5px; color: var(--texto-suave); }
.empty p:last-child { margin-bottom: 0; }