/* ============================================================
   TEMA CLARO (PADRÃO)
   ============================================================ */
:root {
    --fundo-pagina: #f0f4f8;
    --fundo-cabecalho: #ffffff;
    --fundo-card: #ffffff;
    --fundo-destaque: #eef5fc;
    --fundo-input: #ffffff;
    --texto-principal: #333333;
    --texto-secundario: #555555;
    --texto-titulo: #0054a6;
    --borda-padrao: #cce;
    --borda-input: #bbb;
    --cor-botao: #0054a6;
    --cor-botao-hover: #0066cc;
    --cor-perigo: #c00;
    --cor-perigo-hover: #e00;
    --fundo-aviso: #fff3cd;
    --texto-aviso: #856404;
    --borda-aviso: #ffc107;
    --fundo-andamento: #fffbe0;
    --fundo-parado: #ffffff;
    --fundo-finalizado: #f0fff0;
    --cor-tempo-real: #d63000;
    --fundo-detalhes: #f8f8f8;
    --fundo-campo-detalhes: #f0f7ff;
    --borda-destaque: #0054a6;
    --fundo-notificacao: #e8f5e9;
    --texto-notificacao: #2e7d32;
    --borda-notificacao: #2e7d32;
    --fundo-botao-filtro: #eeeeee;
    --texto-botao-filtro: #333333;
    --borda-botao-filtro: #cccccc;
    --sombra-suave: rgba(0,0,0,0.06);
    --sombra-notificacao: rgba(0,0,0,0.15);
    --linha-tabela: #dddddd;
    --fundo-cabecalho-tabela: #eeeeee;
    --fundo-sessao-rodando: #fffbe0;
    --rodape-fundo: #ffffff;
    --rodape-borda: #e0e0e0;
}

/* ============================================================
   TEMA ESCURO — CORRIGIDO
   ============================================================ */
html.tema-escuro {
    --fundo-pagina: #121212;
    --fundo-cabecalho: #1e1e1e;
    --fundo-card: #1e1e1e;
    --fundo-destaque: #252525;
    --fundo-input: #2a2a2a;
    --texto-principal: #e0e0e0;
    --texto-secundario: #b0b0b0;
    --texto-titulo: #66b2ff;
    --borda-padrao: #444;
    --borda-input: #555;
    --cor-botao: #0078d7;
    --cor-botao-hover: #0088ed;
    --cor-perigo: #d32f2f;
    --cor-perigo-hover: #e53935;
    --fundo-aviso: #3d3510;
    --texto-aviso: #ffd966;
    --borda-aviso: #b78900;
    --fundo-andamento: #332e00;
    --fundo-parado: #1e1e1e;
    --fundo-finalizado: #0f2f14;
    --cor-tempo-real: #ff6b6b;
    --fundo-detalhes: #252525;
    --fundo-campo-detalhes: #202a38;
    --borda-destaque: #0078d7;
    --fundo-notificacao: #1b3c1f;
    --texto-notificacao: #a5d6a7;
    --borda-notificacao: #4caf50;
    --fundo-botao-filtro: #333333;
    --texto-botao-filtro: #e0e0e0;
    --borda-botao-filtro: #555555;
    --sombra-suave: rgba(0,0,0,0.30);
    --sombra-notificacao: rgba(0,0,0,0.50);
    --linha-tabela: #444444;
    --fundo-cabecalho-tabela: #2d2d2d;
    --fundo-sessao-rodando: #332e00;
    --rodape-fundo: #1e1e1e;
    --rodape-borda: #333333;
}

/* ============================================================
   ESTILOS GERAIS
   ============================================================ */
* { font-family: Arial, sans-serif; box-sizing: border-box; }
body { 
    background: var(--fundo-pagina); 
    color: var(--texto-principal);
    padding: 10px; 
    max-width: 1100px; 
    margin: 0 auto; 
    padding-bottom: 90px; 
    transition: background 0.3s ease, color 0.3s ease;
}
.cabecalho { 
    background: var(--fundo-cabecalho); 
    padding: 12px 15px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 10px; 
    box-shadow: 0 2px 8px var(--sombra-suave); 
}
.logo-principal img { max-height: 40px; width: auto; }
.cabecalho h1 { margin: 0; font-size: 15px; color: var(--texto-titulo); }
/* Sair e Meu Perfil: MESMA caixa (padding, fonte e altura) para ficarem
   alinhados lado a lado no cabeçalho, sendo o perfil à esquerda do Sair. */
.sair, .meu-perfil { 
    color: #fff; text-decoration: none; 
    padding: 6px 12px; border-radius: 4px; 
    font-weight: bold; font-size: 14px; 
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
}
.sair { background: var(--cor-perigo); }
.sair:hover { background: var(--cor-perigo-hover); }
.meu-perfil { background: var(--cor-botao); }
.meu-perfil:hover { background: var(--cor-botao-hover); }
/* Destaca o botão quando o usuário já está na própria página de perfil */
.meu-perfil.ativo { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); }
.botao-tema {
    background: transparent;
    border: 1px solid var(--borda-input);
    color: var(--texto-principal);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    width: auto;
}
.botao-tema:hover { background: var(--fundo-destaque); }
.aviso { 
    background: var(--fundo-aviso); 
    border: 2px solid var(--borda-aviso); 
    color: var(--texto-aviso); 
    padding: 10px 12px; border-radius: 6px; 
    margin-bottom: 15px; font-weight: bold; font-size: 14px; 
}
.area-filtro { 
    background: var(--fundo-card); 
    padding: 10px 12px; border-radius: 6px; 
    margin-bottom: 15px; display: flex; 
    gap: 8px; align-items: center; flex-wrap: wrap; 
}
.area-filtro form { width: 100%; margin-bottom: 8px; }
.area-filtro input[type="text"] { 
    flex: 1; min-width: 180px; padding: 8px 10px; 
    border: 1px solid var(--borda-input); 
    border-radius: 4px; font-size: 14px; 
    width: 100%; background: var(--fundo-input); color: var(--texto-principal);
}
.area-filtro a { 
    padding: 7px 10px; 
    background: var(--fundo-botao-filtro); 
    color: var(--texto-botao-filtro); 
    text-decoration: none; border-radius: 4px; 
    font-size: 13px; border: 1px solid var(--borda-botao-filtro); 
    flex: 1; text-align: center; white-space: nowrap; 
}
.area-filtro a.ativo { 
    background: var(--cor-botao); color: #fff; border-color: var(--cor-botao); 
}
.area-filtro a:hover { background: var(--cor-botao-hover); color: #fff; }

/* ─── BUSCA INTELIGENTE DE PROJETOS (sugestões estilo select) ─── */
.busca-inteligente {
    position: relative;
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 8px;
}
.busca-inteligente form {
    position: relative;
    width: 100%;
    margin: 0;
}
.busca-inteligente__campo,
.busca-inteligente input[type="text"] {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--borda-input);
    border-radius: 4px;
    font-size: 14px;
    background: var(--fundo-input);
    color: var(--texto-principal);
}
.busca-inteligente input[type="text"]:focus {
    outline: none;
    border-color: var(--borda-destaque);
    box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.18);
}
.busca-inteligente__spinner {
    display: none;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--borda-input);
    border-top-color: var(--cor-botao);
    border-radius: 50%;
    animation: girarBusca 0.6s linear infinite;
}
@keyframes girarBusca {
    to { transform: rotate(360deg); }
}
.busca-sugestoes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 500;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
    background: var(--fundo-card);
    border: 1px solid var(--borda-padrao);
    border-radius: 6px;
    box-shadow: 0 8px 20px var(--sombra-notificacao);
}
.busca-sugestoes[hidden] { display: none; }
.busca-sugestoes__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linha-tabela);
    text-decoration: none;
    color: var(--texto-principal);
    font-size: 14px;
}
.busca-sugestoes__item:last-child { border-bottom: none; }
.busca-sugestoes__item:hover,
.busca-sugestoes__item.ativo { background: var(--fundo-destaque); }
.busca-sugestoes__item mark {
    background: rgba(255, 193, 7, 0.45);
    color: inherit;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 1px;
}
.busca-sugestoes__icone { flex-shrink: 0; }
.busca-sugestoes__nome {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.busca-sugestoes__selo {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--borda-botao-filtro);
    background: var(--fundo-botao-filtro);
    color: var(--texto-botao-filtro);
    font-size: 11px;
    white-space: nowrap;
}
.busca-sugestoes__selo.rodando { border-color: #f90; }
.busca-sugestoes__selo.finalizado { border-color: #090; }
.busca-sugestoes__dias {
    flex-shrink: 0;
    color: var(--texto-secundario);
    font-size: 11px;
}
.busca-sugestoes__seta {
    flex-shrink: 0;
    color: var(--texto-secundario);
    font-size: 12px;
}
.busca-sugestoes__vazio {
    padding: 12px;
    text-align: center;
    color: var(--texto-secundario);
    font-size: 13px;
}
.busca-sugestoes__dica { font-style: italic; }

/* ─── ORDENAÇÃO POR SELECT (compacta: metade do tamanho original) ─── */
.ordem-linha {
    background: var(--fundo-card);
    padding: 5px 6px; border-radius: 4px;
    margin-bottom: 7px; display: flex;
    gap: 4px; align-items: center; flex-wrap: wrap;
}
.ordem-label { font-size: 9px; font-weight: bold; color: var(--texto-secundario); }
.ordem-select {
    flex: 1; min-width: 90px; padding: 4px 5px;
    border: 1px solid var(--borda-input);
    border-radius: 3px; font-size: 9px;
    background: var(--fundo-input); color: var(--texto-principal);
    cursor: pointer;
}
.ordem-select:focus {
    outline: none;
    border-color: var(--borda-destaque);
    box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.18);
}
@media (max-width: 768px) {
    .busca-sugestoes { max-height: 260px; }
    .busca-sugestoes__item { padding: 12px; font-size: 15px; }
    .busca-sugestoes__dias { display: none; }
}

/* ─── FORMULÁRIOS Emparelhados: Busca + Cadastro lado a lado ─── */
.forms-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}
.forms-duo__col { min-width: 0; }
.forms-duo form {
    width: 100%;
}
.forms-duo input[type="text"] {
    width: 100%;
}
.novo-projeto-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}
.novo-projeto-form button {
    width: 100%;
}

/* ─── Formulários minimizados/expansíveis ─── */
.form-toggle {
    background: var(--fundo-card);
    border: 1px solid var(--borda-padrao);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
/* Quando o formulário está aberto precisamos permitir que o dropdown da
   busca "saia" do card e sobreponha o conteúdo abaixo (senão ele fica
   cortado por causa do overflow:hidden acima). */
.form-toggle_aberto {
    overflow: visible;
}
.form-toggle_aberto .form-toggle__label {
    border-radius: 5px 5px 0 0;
}
.form-toggle__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    background: var(--fundo-destaque);
    border-bottom: 1px solid var(--borda-input);
    color: var(--texto-titulo);
    font-weight: 600;
    font-size: 14px;
}
.form-toggle__label:hover {
    background: var(--fundo-destaque);
    border-color: var(--borda-destaque);
}
.form-toggle__icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 12px;
    color: var(--texto-secundario);
}
.form-toggle_aberto .form-toggle__icon {
    transform: rotate(90deg);
}
.form-toggle__title {
    flex: 1;
}
.form-toggle__corpo {
    display: none;
    padding: 12px;
}
.form-toggle_aberto .form-toggle__corpo {
    display: block;
}

@media (max-width: 768px) {
    .forms-duo {
        grid-template-columns: 1fr;
    }
    /* Os formulários continuam minimizados no celular, igual ao PC:
       abrem/fecham ao tocar no título (o JS do gtempo.php cuida disso). */
}
.card { 
    background: var(--fundo-card); 
    border: 1px solid var(--borda-padrao); 
    border-radius: 6px; padding: 12px; margin-bottom: 12px; 
}
.card h3 { margin-top: 0; font-size: 15px; color: var(--texto-titulo); border-bottom: 1px solid var(--borda-input); padding-bottom: 8px; }
input { 
    padding: 8px; border: 1px solid var(--borda-input); 
    border-radius: 4px; font-size: 14px; 
    width: 100%; margin-bottom: 8px; 
    background: var(--fundo-input); color: var(--texto-principal);
}
button { 
    padding: 8px 14px; cursor: pointer; border: none; 
    border-radius: 4px; background: var(--cor-botao); 
    color: #fff; font-size: 14px; width: 100%; 
}
button:hover { background: var(--cor-botao-hover); }
.botoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.botoes a, .botoes button { 
    display: inline-block; margin: 2px; padding: 5px 8px; 
    font-size: 12px; background: var(--fundo-botao-filtro); 
    color: var(--texto-botao-filtro); text-decoration: none; 
    border-radius: 3px; border: 1px solid var(--borda-botao-filtro); 
    flex: 1; min-width: 70px; text-align: center; width: auto;
}
.botoes a:hover, .botoes button:hover { background: var(--cor-botao-hover); color: #fff; }
.botoes a.desativado, .botoes button.desativado { opacity: 0.4; cursor: not-allowed; }
.em-andamento { background: var(--fundo-andamento); border-left: 4px solid #f90; }
.parado { background: var(--fundo-parado); }
.finalizado { background: var(--fundo-finalizado); border-left: 4px solid #090; }
.tempo-real { 
    font-size: 15px; font-weight: bold; color: var(--cor-tempo-real); 
    font-family: 'Courier New', monospace; display: block; margin: 4px 0; 
}
.tempo-total { 
    font-size: 14px; color: var(--texto-secundario); 
    font-weight: 500; display: block; margin: 4px 0; 
}
.detalhes { 
    display: none; margin-top: 12px; padding: 12px; 
    background: var(--fundo-detalhes); border-radius: 4px; 
    border-top: 2px solid var(--borda-destaque); 
}
.rotulo { 
    font-weight: bold; font-size: 13px; display: block; 
    margin-bottom: 6px; color: var(--texto-principal); margin-top: 10px; 
}
.caixa-info { 
    background: var(--fundo-destaque); padding: 10px; border-radius: 6px; 
    margin-bottom: 12px; border-left: 3px solid var(--borda-destaque); 
    font-size: 14px; 
}
.caixa-info p { margin: 4px 0; font-size: 14px; }
.caixa-info strong { color: var(--texto-titulo); }
.lembrete-salvo { 
    background: var(--fundo-aviso); border-left: 3px solid var(--borda-aviso); 
    padding: 8px 10px; margin-bottom: 12px; border-radius: 4px; 
    font-size: 13px; color: var(--texto-aviso); 
}
.campo-texto { 
    width: 100%; min-height: 100px; padding: 10px; 
    border: 1px solid var(--borda-input); border-radius: 4px; 
    font-family: 'Segoe UI', Roboto, sans-serif; font-size: 15px; 
    line-height: 1.5; resize: vertical; outline: none; 
    margin-bottom: 10px; background: var(--fundo-input); color: var(--texto-principal);
}
.campo-texto:focus { 
    border-color: var(--borda-destaque); 
    box-shadow: 0 0 0 2px rgba(0,120,215,0.15); 
}
.campo-detalhes { 
    min-height: 70px; background: var(--fundo-campo-detalhes); 
    border-color: var(--borda-destaque); 
}
/* ─── NOTIFICAÇÃO "✅ SALVO AUTOMATICAMENTE" (empilha várias mensagens) ───
   Container fixo no canto inferior direito, largura máxima 300px; cada
   mensagem é um item próprio — se duas chegarem juntas, ficam uma sobre a outra. */
.notificacao-salvo {
    position: fixed; bottom: 80px; right: 10px; left: auto;
    width: 300px; max-width: calc(100vw - 20px);
    display: flex; flex-direction: column; gap: 8px;
    z-index: 9999; pointer-events: none;
}
.notificacao-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    background: var(--fundo-notificacao);
    border-left: 4px solid var(--borda-notificacao);
    color: var(--texto-notificacao); padding: 10px 12px;
    border-radius: 6px; box-shadow: 0 4px 12px var(--sombra-notificacao);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 14px; font-weight: 500;
    pointer-events: auto;
}
.notificacao-item.mostrar { opacity: 1; transform: translateY(0); }
.notificacao-item .msg { flex: 1; }
.notificacao-item .fechar {
    background: none; border: none; font-size: 18px;
    font-weight: bold; color: var(--texto-notificacao);
    cursor: pointer; padding: 0; line-height: 1; margin: 0; width: auto;
    flex-shrink: 0;
}
.historico { 
    margin-top: 12px; border-top: 1px dashed var(--borda-input); 
    padding-top: 10px; font-size: 12px; overflow-x: auto; 
}
table.hist { 
    width: 100%; border-collapse: collapse; margin-top: 8px; min-width: 500px; 
}
table.hist th, table.hist td { 
    border: 1px solid var(--linha-tabela); padding: 4px 3px; 
    text-align: center; font-size: 11px; 
}
table.hist th { background: var(--fundo-cabecalho-tabela); color: var(--texto-principal); }
.sessao-rodando { background: var(--fundo-sessao-rodando); border-left: 3px solid #f90; }
table.hist input { 
    width: 95%; padding: 3px 2px; font-size: 11px; 
    border: 1px solid var(--borda-input); border-radius: 3px; 
    text-align: center; background: var(--fundo-input); color: var(--texto-principal);
}
table.hist input:focus { border-color: var(--borda-destaque); outline: none; }
/* Botão "Ver mais" do rodapé do histórico de sessões */
.hist-ver-mais {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 5px 8px;
    border: 1px solid var(--borda-input);
    border-radius: 4px;
    background: var(--fundo-botao-filtro);
    color: var(--texto-botao-filtro);
    font-size: 11px;
    cursor: pointer;
}
.hist-ver-mais:hover {
    background: var(--cor-botao);
    border-color: var(--cor-botao);
    color: #fff;
}
.rodape { 
    position: fixed; bottom: 0; left: 0; right: 0; 
    background: var(--rodape-fundo); border-top: 1px solid var(--rodape-borda); 
    padding: 10px 15px; text-align: center; font-size: 12px; 
    color: var(--texto-secundario); box-shadow: 0 -2px 6px var(--sombra-suave); 
    z-index: 100; 
}
.rodape a { color: var(--texto-titulo); font-weight: bold; text-decoration: none; }

/* ─────────────── REGRAS PARA CELULAR ─────────────── */
@media (max-width: 768px) {
    body { padding: 8px; padding-bottom: 80px; }
    .cabecalho { flex-direction: column; text-align: center; gap: 8px; }
    .cabecalho h1 { font-size: 14px; }
    .area-filtro { flex-direction: column; align-items: stretch; }
    .area-filtro a { padding: 8px; font-size: 14px; }
    .botoes a, .botoes button { min-width: 80px; padding: 7px 5px; font-size: 12px; }
    .caixa-info p { font-size: 13px; }
    .tempo-real { font-size: 16px; }
    .tempo-total { font-size: 13px; }
    .historico { overflow-x: auto; }
    /* Notificação no TOPO no celular: o teclado cobre a parte de baixo
       da tela e a div sumia atrás dele */
    .notificacao-salvo { top: 10px; bottom: auto; left: 8px; right: 8px; width: auto; max-width: none; }
    .notificacao-item { font-size: 13px; }
}
@media (max-width: 480px) {
    .cabecalho h1 { font-size: 13px; }
    .card { padding: 10px; }
    .botoes { flex-direction: column; }
    .botoes a, .botoes button { width: 100%; margin: 2px 0; }
}
html.tema-escuro .logo-principal img,
html.tema-escuro .logo-topo img {
    filter: drop-shadow(0 0 2px #fff) 
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
textarea.campo-detalhes,
textarea.campo-texto {
  resize: none;
  overflow: hidden;
  min-height: 80px;
  line-height: 1.5;
}
/* ─── TABELAS DE TAREFAS ESTILO HARMONIZADO ─── */
table.tarefas { 
    width: 100%; border-collapse: collapse; margin: 10px 0 20px; 
    font-size: 14px; border-radius: 6px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
table.tarefas th, table.tarefas td { 
    border: 1px solid #e0e6ed; padding: 10px 12px; text-align: left; 
}
table.tarefas th { 
    background: linear-gradient(to bottom, #f8f9fa, #eef1f5); 
    font-weight: 600; color: #2c3e50; border-bottom: 2px solid #d0d7e0;
}
table.tarefas tr:nth-child(even) { background: #fbfcfd; }
table.tarefas tr:hover { background: #eef5fc; transition: background 0.15s ease; }
/* Largura da coluna "Ações": os 3 botões de ícone (24px cada) precisam caber
   na MESMA linha. Somando 3×24px + 1px de margem por lado (78px) e o padding
   lateral, 132px dá folga sem roubar espaço do texto da tarefa.
   O white-space: nowrap é o que garante isso: com table-layout automático ele
   fixa a largura mínima da coluna e impede a quebra dos botões para a 2ª linha. */
table.tarefas td.acoes {
    width: 132px; min-width: 132px; text-align: center; padding: 7px 8px;
    white-space: nowrap;
}
table.tarefas td.status { width: 50px; text-align: center; }
table.tarefas td.texto-tarefa {
    line-height: 1.5;
    /* Palavras gigantes (URLs, códigos sem espaço) quebram dentro da célula em
       vez de esticar a tabela — é o que mantém a coluna "Ações" com a sua
       largura e os botões na mesma linha, mesmo com tarefas muito longas. */
    overflow-wrap: anywhere;
}
table.tarefas td.concluida { text-decoration: none; color: #8899aa; }

/* ─── COPIAR O TEXTO DA TAREFA (botão 📋 ao fim do texto) ─── */
/* O tamanho da fonte é o mesmo do texto da tarefa (font-size: inherit),
   então o botão acompanha a tarefa em vez de virar um botão quadrado na
   coluna de ações. O ícone fica discreto e se destaca no hover / ao copiar. */
table.tarefas td.texto-tarefa.copiavel { cursor: pointer; }
table.tarefas td.texto-tarefa .btn-copiar-tarefa {
    font-size: inherit; line-height: inherit; font-family: inherit;
    margin-left: 2px; opacity: 0.5; white-space: nowrap;
    user-select: none; transition: opacity 0.15s ease;
}
table.tarefas td.texto-tarefa.copiavel:hover .btn-copiar-tarefa { opacity: 1; }
table.tarefas td.texto-tarefa .btn-copiar-tarefa.copiado {
    opacity: 1; color: #27ae60; font-weight: 600;
}

/* ─── BOTÕES DE AÇÃO SÓ COM ÍCONE + TOOLTIP ─── */
/* Ícones compactos: cabem 3 botões na coluna "Ações" sem empurrar o texto
   da tarefa — a largura dessa coluna está em table.tarefas td.acoes (acima);
   se mudar o tamanho dos botões, ajuste aquela largura também.
   24px é o menor tamanho confortável de clique (padrão de acessibilidade de
   área de toque), e o glifo fica em 13px.
   Para aumentar/diminuir de novo, basta alterar width/height/font-size. */
.btn-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; margin: 0 1px; border: none; border-radius: 4px;
    cursor: pointer; font-size: 13px; line-height: 1; position: relative; transition: all 0.15s ease;
}
.btn-icone:hover { transform: scale(1.12); }
.btn-icone .tooltip {
    visibility: hidden; position: absolute; bottom: -27px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a; color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 4px;
    white-space: nowrap; opacity: 0; transition: opacity 0.15s ease; z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.btn-icone:hover .tooltip { visibility: visible; opacity: 1; }
.btn-feito { background: #27ae60; color: #fff; }
.btn-feito:hover { background: #219653; }
.btn-desfazer { background: #f39c12; color: #fff; }
.btn-desfazer:hover { background: #e67e22; }
.btn-editar { background: #0054a6; color: #fff; }
.btn-editar:hover { background: #0066cc; }
.btn-excluir { background: #c00; color: #fff; }
.btn-excluir:hover { background: #e00; }

/* ─── LINHA DE META DO PROJETO (⭐ Prioridade · 🌍 Público · Salvar meta) ─── */
/* Tudo na MESMA linha: a descrição de cada select fica ao lado dele (flex) e
   o botão tem a MESMA altura dos selects (30px) — antes o botão herdava o
   padding maior do estilo global de "button" e ficava desproporcional.
   Para redimensionar o conjunto inteiro, mude apenas o height abaixo. */
.linha-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: 10px; padding-top: 8px; font-size: 13px;
    border-top: 1px solid var(--borda-padrao);
}
.linha-meta > label {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; white-space: nowrap;
}
.linha-meta select,
.linha-meta button {
    width: auto; margin: 0; height: 30px; padding: 0 8px;
    font-size: 13px; line-height: 1; font-family: inherit;
    border-radius: 4px; box-sizing: border-box;
}
.linha-meta select {
    border: 1px solid var(--borda-input);
    background: var(--fundo-input); color: var(--texto-principal);
    cursor: pointer; min-width: 150px;
}
.linha-meta button {
    border: 1px solid var(--cor-botao);
    background: var(--cor-botao); color: #fff;
    font-weight: bold; white-space: nowrap; cursor: pointer;
}
.linha-meta button:hover { background: var(--cor-botao-hover); border-color: var(--cor-botao-hover); }
/* Feedback do botão "Salvar meta" (classes aplicadas pelo js/script.js) */
.linha-meta button.salvar-meta-salvo { background: #27ae60; border-color: #27ae60; }
.linha-meta button.salvar-meta-erro { background: var(--cor-perigo); border-color: var(--cor-perigo); }

/* ─── TEMA ESCURO ─── */
html.tema-escuro table.tarefas th { 
    background: linear-gradient(to bottom, #2c3440, #232a33); color: #e0e6ed; 
    border-bottom-color: #3a4555;
}
html.tema-escuro table.tarefas th,
html.tema-escuro table.tarefas td { border-color: #3a4555; }
html.tema-escuro table.tarefas tr { background: #262c36; }
html.tema-escuro table.tarefas tr:nth-child(even) { background: #222832; }
html.tema-escuro table.tarefas tr:hover { background: #2d3542; }
html.tema-escuro table.tarefas td.concluida { color: #667788; }

/* ============================================================
   LISTA DE PROJETOS — LINHAS / CARDS CLICÁVEIS
   ============================================================ */
.projetos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.projeto-card {
    background: var(--fundo-card);
    border: 1px solid var(--borda-padrao);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--sombra-suave);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.projeto-card:hover {
    border-color: var(--borda-destaque);
    box-shadow: 0 3px 10px var(--sombra-suave);
}

.projeto-card.em-andamento {
    border-left: 4px solid #f90;
}

.projeto-card.parado {
    border-left: 4px solid var(--borda-input);
}

.projeto-card.finalizado {
    border-left: 4px solid #090;
}

/* Linha compacta clicável */
.projeto-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    min-height: 46px;
}

.projeto-linha:focus {
    outline: 2px solid var(--borda-destaque);
    outline-offset: -2px;
}

.projeto-linha-dados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.projeto-nome {
    font-weight: 600;
    color: var(--texto-titulo);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.projeto-status {
    font-size: 13px;
    color: var(--texto-secundario);
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.rodando {
    background: var(--fundo-andamento);
    color: #b8860b;
    border: 1px solid #f90;
}

.status-badge.parado {
    background: var(--fundo-parado);
    color: var(--texto-secundario);
    border: 1px solid var(--borda-input);
}

.status-badge.finalizado {
    background: var(--fundo-finalizado);
    color: #1a6b1a;
    border: 1px solid #090;
}

.projeto-dado {
    font-size: 13px;
    color: var(--texto-secundario);
    white-space: nowrap;
    margin-left: auto;
}

.projeto-linha .tempo-real,
.projeto-linha .tempo-total {
    display: inline;
}

.projeto-irracionais {
    color: var(--texto-secundario);
    font-size: 12px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Detalhes em acordeão */
.detalhes-projeto {
    padding: 12px 12px 14px 12px;
    border-top: 1px solid var(--borda-input);
    background: var(--fundo-detalhes);
}

/* ─── CARD DE PROJETO EXPANSÍVEL (GTEMPO) ─── */
.projeto-card {
    padding: 0;
    overflow: hidden;
}
/* ─── MODO MAXIMIZADO ───
   Com um card aberto, os demais cards da lista desaparecem para dar foco
   total ao projeto em execução. Ao minimizar, a lista volta a aparecer. */
.conteudo.lista-maximizada .projeto-card:not(.projeto-aberto) { display: none; }
.projeto-fechar {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid var(--borda-botao-filtro);
    border-radius: 4px;
    background: var(--fundo-botao-filtro);
    color: var(--texto-botao-filtro);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.projeto-fechar:hover {
    background: var(--cor-perigo);
    border-color: var(--cor-perigo);
    color: #fff;
}
.projeto-card.projeto-aberto .projeto-fechar { display: inline-flex; }
/* ↩️ VOLTAR PROJETO: botão do card CONCLUÍDO (junto do ✖, no topo) —
   devolve o projeto para Standby e libera a edição */
.projeto-voltar {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid var(--borda-botao-filtro);
    border-radius: 4px;
    background: var(--fundo-botao-filtro);
    color: var(--texto-botao-filtro);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.projeto-voltar:hover {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
}
.projeto-card.finalizado.projeto-aberto .projeto-voltar { display: inline-flex; }
.projeto-card h3.projeto-linhas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 12px 14px;
    border-bottom: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-titulo);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.projeto-card h3.projeto-linhas:hover {
    background: var(--fundo-destaque);
}
/* ↩️ Controles no topo do cabeçalho */
.projeto-seta-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-right: 4px;
    border: 1px solid var(--borda-padrao);
    border-radius: 3px;
    background: var(--fundo-card);
    color: var(--texto-secundario);
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}
.projeto-card.projeto-aberto .projeto-seta-ctrl {
    background: var(--fundo-destaque);
    border-color: var(--borda-destaque);
    color: var(--texto-titulo);
    transform: rotate(90deg);
}
.projeto-seta-ctrl:hover {
    background: var(--cor-botao);
    border-color: var(--cor-botao);
    color: #fff;
}
.projeto-card .projeto-seta {
    display: inline-block;
    font-size: 11px;
    color: var(--texto-secundario);
    transition: transform 0.2s ease;
}
.projeto-card.projeto-aberto .projeto-seta {
    transform: rotate(90deg);
}
.projeto-card .projeto-nome {
    font-weight: 700;
}
.projeto-card .projeto-crono {
    /* Cronômetro antes do nome, na mesma formatação do título (fonte maior) */
    font-weight: 700;
    font-size: 15px;
    color: var(--texto-titulo);
    white-space: nowrap;
}
/* MODO MAXIMIZADO — no topo fica somente o cronômetro + nome */
.projeto-card.projeto-aberto .projeto-dados,
.projeto-card.projeto-aberto .projeto-status,
.projeto-card.projeto-aberto .projeto-meta { display: none; }
.projeto-card .projeto-dados,
.projeto-card .projeto-status,
.projeto-card .projeto-meta {
    font-weight: 500;
    font-size: 13px;
    color: var(--texto-secundario);
}
.projeto-card .projeto-nome-stealth,
.projeto-card .projeto-nome,
.projeto-card .projeto-periodos,
.projeto-card .projeto-status-standout {
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-titulo);
    white-space: nowrap;
}
.projeto-card .projeto-nome-stealth { font-weight: 400; color: var(--texto-secundario); font-size: 13px; opacity: 0.8; }
.projeto-card .projeto-periodos { font-style: italic; font-weight: 400; color: var(--texto-secundario); font-size: 13px; opacity: 0.85; margin-left: 4px; }
.projeto-card .projeto-status-standout { font-weight: 400; color: var(--texto-secundario); font-size: 13px; opacity: 0.85; margin-left: 4px; }
.projeto-card.projeto-aberto .projeto-nome-stealth,
.projeto-card.projeto-aberto .projeto-periodos { display: none; }
.projeto-card.projeto-aberto .projeto-nome,
.projeto-card.projeto-aberto .projeto-status-standout {
    display: inline;
    font-weight: 700;
    color: var(--texto-titulo);
    font-size: 15px;
}
.projeto-card.projeto-aberto {
    border-color: var(--borda-destaque);
    box-shadow: 0 2px 10px var(--sombra-suave);
}

.detalhes-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.detalhes-topo-botoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.botao-acao {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--cor-botao);
    border: 1px solid transparent;
    transition: background 0.2s ease;
    min-width: 90px;
    text-align: center;
}

.botao-acao:hover {
    background: var(--cor-botao-hover);
}

.botao-acao.iniciar {
    background: #27ae60;
}

.botao-acao.iniciar:hover {
    background: #219653;
}

.botao-acao.continuar {
    background: #0054a6;
}

.botao-acao.continuar:hover {
    background: #0066cc;
}

.botao-acao.parar {
    background: #e67e22;
}

.botao-acao.parar:hover {
    background: #d35400;
}

.botao-acao.finalizar {
    background: #16a085;
}

.botao-acao.finalizar:hover {
    background: #128a6e;
}

.botao-acao.desativado {
    background: var(--fundo-botao-filtro);
    color: var(--texto-secundario);
    border: 1px solid var(--borda-botao-filtro);
    cursor: not-allowed;
    opacity: 0.7;
}

.projeto-meta {
    font-size: 12px;
    color: var(--texto-secundario);
    white-space: nowrap;
}

/* ============================================================
   TEMA / LAYOUT DO SISTEMA (theme.php + theme-foot.php)
   ============================================================ */
.menu-principal {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: var(--fundo-cabecalho);
    padding: 8px 10px; border-radius: 8px; margin-bottom: 15px;
    box-shadow: 0 2px 8px var(--sombra-suave);
}
.menu-principal a {
    flex: 1; min-width: 130px; text-align: center;
    padding: 9px 10px; border-radius: 6px; text-decoration: none;
    font-size: 14px; font-weight: 600;
    color: var(--texto-botao-filtro); background: var(--fundo-botao-filtro);
    border: 1px solid var(--borda-botao-filtro);
    transition: background 0.2s ease, color 0.2s ease;
}
.menu-principal a:hover { background: var(--cor-botao-hover); color: #fff; }
.menu-principal a.ativo { background: var(--cor-botao); color: #fff; border-color: var(--cor-botao); }
.menu-principal a .icone { font-size: 15px; margin-right: 4px; }
.usuario-logado { font-size: 13px; color: var(--texto-secundario); white-space: nowrap; }
.conteudo { display: block; }

/* ─── PÁGINA INICIAL (index.php) — ⏳ CARD DO PROJETO EM ANDAMENTO ─── */
/* Fica no TOPO da página, logo depois do cabeçalho, em formato compacto (uma
   linha só): nome + cronômetro à esquerda e o link à direita. O `flex-wrap`
   deixa o link descer sozinho no celular, sem empurrar o cronômetro.
   ⚠️ CLASSE PRÓPRIA OBRIGATÓRIA: .em-andamento é COMPARTILHADA com os cards
   do gerente (gtempo.php monta "card projeto-card em-andamento" e o script.js
   adiciona a mesma classe ao iniciar um projeto). Se este card usasse aquela
   classe, viraria um container flex e jogaria a linha do projeto, os detalhes
   e as tabelas de tarefas LADO A LADO — estourando a largura e cortando a tela
   (principalmente no celular). Por isso o visual laranja é repetido abaixo. */
.card-rodando {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 14px; padding: 10px 14px; margin-bottom: 12px;
    background: var(--fundo-andamento); border-left: 4px solid #f90;
}
/* min-width:0 permite o flex item encolher; overflow-wrap evita que um nome de
   projeto comprido (sem espaços) empurre o card para fora da tela no celular. */
.card-rodando-nome { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
/* O cronômetro é display:block por padrão (.tempo-real) — aqui ele volta para
   a mesma linha do nome e sem as margens verticais, que aumentariam o card. */
.card-rodando-nome .tempo-real { display: inline-block; margin: 0; font-size: 14px; }
.card-rodando-abrir {
    white-space: nowrap; font-size: 13px; font-weight: 600;
    padding: 5px 12px; border-radius: 4px; text-decoration: none;
    background: var(--cor-botao); color: #fff;
}
.card-rodando-abrir:hover { background: var(--cor-botao-hover); }
.cartoes-atalho { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.cartao-atalho {
    flex: 1; min-width: 210px; display: block;
    background: var(--fundo-card); border: 1px solid var(--borda-padrao);
    border-radius: 8px; padding: 16px; text-decoration: none;
    color: var(--texto-principal); box-shadow: 0 2px 6px var(--sombra-suave);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.cartao-atalho:hover { transform: translateY(-2px); border-color: var(--borda-destaque); }
.cartao-atalho .icone { font-size: 26px; display: block; margin-bottom: 8px; }
.cartao-atalho strong { display: block; color: var(--texto-titulo); font-size: 15px; margin-bottom: 4px; }
.cartao-atalho .desc { font-size: 13px; color: var(--texto-secundario); }
.resumo-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14px; }
/* Itens do resumo do painel: permitem encolher/quebrar em vez de esticar a
   coluna e cortar a tela (em tela estreita, "🟡 Em desenvolvimento: 12"). */
.resumo-projetos > div { min-width: 0; overflow-wrap: anywhere; }
/* No celular o card compacto do topo (index) ocupa a linha inteira. */
@media (max-width: 480px) {
    .card-rodando { padding: 8px 10px; gap: 6px 10px; }
    .card-rodando-nome, .card-rodando-nome .tempo-real { font-size: 13px; }
    .card-rodando-abrir { flex: 1 1 100%; text-align: center; }
}

/* ─── CARDS DA TELA INICIAL LADO A LADO (📊 Resumo · 🖥️ Status) ─── */
/* Dividem a mesma linha como duas colunas: Resumo à esquerda e Status à
   direita, com a mesma altura (comportamento padrão do grid). */
.linha-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
/* min-width:0 = item do grid pode encolher abaixo do seu conteúdo mínimo; sem
   isso, um texto longo estoura a coluna e corta a tela no celular. */
.linha-cards > .card { margin-bottom: 0; min-width: 0; }   /* o espaçamento fica na grade */
.linha-cards.sozinho { grid-template-columns: 1fr; }       /* só o Resumo (não-admin) */
/* No card estreito o resumo mantém as 2 colunas (2×2) — os rótulos foram
   encurtados justamente para caber aqui — apenas com um respiro menor. */
.linha-cards:not(.sozinho) .resumo-dados { gap: 8px 14px; }

/* ─── ITENS DE STATUS DO CARD DA TELA INICIAL (🖥️ Status dos Servidores) ─── */
/* Centralizados: com flex + wrap o bloco fica no meio do card mesmo quando os
   12 serviços quebram em 2 ou 3 linhas, e o gap mantém o espaçamento igual
   entre os itens (antes havia margin-right em cada um, que desalinhava as bordas
   quando o conteúdo era centralizado). */
.status-itens {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
    margin: 8px 0; font-size: 14px;
}
.status-itens > span { white-space: nowrap; }

/* ── TELAS SIMPLES (login / redefinir senha) ─── */
.logo-topo { text-align: center; margin: 20px 0 14px; }
.logo-topo img { max-height: 70px; width: auto; }
.caixa-login {
    max-width: 430px; margin: 0 auto;
    background: var(--fundo-card); border: 1px solid var(--borda-padrao);
    border-radius: 10px; padding: 20px; box-shadow: 0 4px 14px var(--sombra-suave);
}
.caixa-login h2 { margin: 0 0 14px; font-size: 18px; color: var(--texto-titulo); text-align: center; }
.caixa-login p { margin: 0 0 12px; }
.caixa-login label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rodape-login { text-align: center; font-size: 12px; color: var(--texto-secundario); margin: 20px 0 30px; }
.rodape-login a, .link-voltar { color: var(--texto-titulo); font-weight: bold; text-decoration: none; }
.link-voltar { display: block; text-align: center; margin-top: 14px; font-size: 13px; }

/* ─── MENSAGENS DE ERRO / SUCESSO ─── */
.erro, .msg-erro {
    background: #fdecea; border: 1px solid #f5c6cb; color: #b71c1c;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 12px;
    font-size: 14px; font-weight: 600;
}
.msg-sucesso {
    background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 12px;
    font-size: 14px; font-weight: 600;
}
.lista-erros { margin: 0; padding-left: 20px; font-weight: 500; }
html.tema-escuro .erro, html.tema-escuro .msg-erro { background: #3a1c1c; border-color: #8b2f2f; color: #ffb3b3; }
html.tema-escuro .msg-sucesso { background: #1b3c1f; border-color: #4caf50; color: #a5d6a7; }

/* ============================================================
   CAMPOS DE SENHA — OLHO (VER), COPIAR E GERAR SENHA
   Usados em login.php, perfil.php e recuperar-senha.php
   ============================================================ */
.campo-senha { display: flex; gap: 6px; align-items: flex-start; }
.campo-senha input { flex: 1; min-width: 0; }
.btn-olho, .btn-copiar, .btn-gerar {
    width: auto; flex: 0 0 auto; margin-bottom: 8px;
    padding: 8px 12px; font-size: 15px; border-radius: 4px;
    background: var(--fundo-botao-filtro); color: var(--texto-botao-filtro);
    border: 1px solid var(--borda-botao-filtro); cursor: pointer;
}
.btn-olho:hover, .btn-copiar:hover, .btn-gerar:hover { background: var(--cor-botao-hover); color: #fff; }
.btn-gerar, .btn-copiar { font-size: 13px; font-weight: 600; }
.ajuda-campo { display: block; font-size: 12px; color: var(--texto-secundario); margin: -2px 0 10px; }

.caixa-senha-gerada {
    background: var(--fundo-destaque); border: 1px dashed var(--borda-destaque);
    border-radius: 6px; padding: 12px; margin-bottom: 12px;
}
.caixa-senha-gerada p { margin: 0 0 8px; }
.caixa-senha-gerada input {
    font-family: 'Courier New', monospace; font-size: 17px; font-weight: bold;
    letter-spacing: 1px; color: var(--texto-titulo); text-align: center;
}
.caixa-senha-gerada .botoes a {
    display: inline-block; margin: 2px; padding: 5px 10px; font-size: 12px;
    background: var(--fundo-botao-filtro); color: var(--texto-botao-filtro);
    border: 1px solid var(--borda-botao-filtro); border-radius: 3px;
    text-decoration: none; text-align: center; flex: 1; min-width: 90px;
}
.caixa-senha-gerada .botoes a:hover { background: var(--cor-botao-hover); color: #fff; }

/* ─── AJUSTES FINOS PARA CELULAR ─── */
@media (max-width: 768px) {
    .menu-principal a { min-width: 100%; }
    .resumo-dados { grid-template-columns: 1fr; }
    /* Exceção: o resumo do painel continua em 2×2 (rótulos curtos cabem) */
    .resumo-projetos { grid-template-columns: 1fr 1fr; font-size: 13px; }
    /* Os itens de status acompanham a mesma fonte do resumo (cards lado a lado) */
    .status-itens { font-size: 13px; }
    .linha-cards { grid-template-columns: 1fr; }
    .cartoes-atalho { flex-direction: column; }
    .caixa-login { padding: 15px; }
    .logo-topo img { max-height: 55px; }
    .btn-olho, .btn-copiar, .btn-gerar { padding: 8px 10px; }
    /* Evita zoom de iOS ao focar inputs (fonte < 16px dispara zoom) */
    .busca-inteligente input[type="text"],
    .area-filtro input[type="text"],
    .novo-projeto-form input[type="text"],
    .projeto-card input, .projeto-card textarea,
    table.hist input, table.hist time { font-size: 16px; }
    /* Touch targets mínimos (44px) para usabilidade em tela sensível */
    .botao-acao { min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 14px; }
    .botao-tema { min-width: 44px; min-height: 44px; padding: 8px 10px; font-size: 18px; }
    .projeto-linha { min-height: 44px; padding: 10px 12px; font-size: 14px; }
    .projeto-nome { max-width: 180px; font-size: 14px; }
    .projeto-status { font-size: 12px; }
    .projeto-dados { font-size: 12px; }
    .projeto-meta { font-size: 11px; }
    .detalhes-topo { flex-wrap: wrap; gap: 6px; }
    .detalhes-topo-botoes { flex-wrap: wrap; gap: 6px; }
    table.tarefas { font-size: 13px; }
    table.tarefas td, table.tarefas th { padding: 8px 6px; }
    table.tarefas td.acoes { width: 118px; min-width: 118px; padding: 7px 4px; }
    table.tarefas td.status { width: 50px; }
    /* Meta do projeto: select e botão seguem do mesmo tamanho e a fonte de
       16px evita o zoom automático do iOS ao tocar no select */
    .linha-meta select, .linha-meta button { font-size: 16px; height: 34px; }
    .usuario-logado { font-size: 12px; }
}
@media (max-width: 480px) {
    .projeto-linha h3 { font-size: 13px; }
    /* Em telas bem estreitas o resumo volta a 1 coluna: em 2 colunas o rótulo
       "🟡 Em desenvolvimento:" quebraria no meio da palavra. */
    .resumo-projetos { grid-template-columns: 1fr; }
    .projeto-nome { max-width: 140px; font-size: 13px; }
    .projeto-dados { font-size: 11px; }
    .projeto-status { font-size: 11px; }
    .botao-acao { min-height: 40px; padding: 8px 10px; font-size: 12px; }
    .tempo-real { font-size: 15px; }
    .tempo-total { font-size: 12px; }
    .cabecalho .botao-tema { font-size: 16px; }
    .notificacao-salvo { bottom: 70px; font-size: 12px; }
}