/* ==========================================================================
   public/css/comum/base.css
   Aspecto comum a todas as páginas do CYBERSMS: cores, barra de navegação,
   caixas, tabelas, avisos, janelas (modais) e o tema escuro.
   Cor da marca: azul-petróleo (SMS) com o âmbar da CYBERSYS nos destaques.
   ========================================================================== */

/* ── INÍCIO — Cores ── */
:root {
  --cs-fundo: #f1f5f9;                                     /* fundo da página */
  --cs-caixa: #ffffff;                                     /* fundo das caixas */
  --cs-borda: #e2e8f0;                                     /* linhas e bordas */
  --cs-texto: #0f172a;                                     /* texto principal */
  --cs-texto-suave: #64748b;                               /* texto secundário */
  --cs-marca: #0e7490;                                     /* azul-petróleo */
  --cs-marca-escura: #155e75;                              /* ao passar o rato */
  --cs-destaque: #f5a623;                                  /* âmbar CYBERSYS */
  --cs-verde: #16a34a;                                     /* entregue / ok */
  --cs-vermelho: #dc2626;                                  /* falhou / erro */
  --cs-ambar: #d97706;                                     /* na fila / aviso */
  --cs-sombra: 0 8px 28px rgba(15, 23, 42, .08);           /* sombra suave */
}
html[data-theme="dark"] {
  --cs-fundo: #0b1220;                                     /* fundo escuro */
  --cs-caixa: #131c2e;                                     /* caixas escuras */
  --cs-borda: #23304a;                                     /* bordas escuras */
  --cs-texto: #e2e8f0;                                     /* texto claro */
  --cs-texto-suave: #94a3b8;                               /* texto secundário claro */
  --cs-sombra: 0 8px 28px rgba(0, 0, 0, .35);              /* sombra mais forte */
}
/* ── FIM — Cores ── */

/* ── INÍCIO — Página ── */
html, body { min-height: 100%; }                           /* fundo até ao fim */
body {
  margin: 0;                                               /* sem margem do browser */
  background: var(--cs-fundo);                             /* fundo */
  color: var(--cs-texto);                                  /* texto */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* letra do sistema */
  -webkit-font-smoothing: antialiased;                     /* letra mais limpa */
}
.cs-conteudo { max-width: 1280px; margin: 0 auto; padding: 18px 20px 40px; } /* largura do conteúdo */
.cs-titulo-da-pagina { font-size: 22px; font-weight: 800; margin: 4px 0 2px; } /* título */
.cs-subtitulo { font-size: 13px; color: var(--cs-texto-suave); margin-bottom: 16px; } /* explicação */
[hidden] { display: none !important; }                     /* escondido de verdade */
/* ── FIM — Página ── */

/* ── INÍCIO — Barra de navegação ── */
.cs-barra { background: #0f172a; color: #e2e8f0; position: sticky; top: 0; z-index: 1020; } /* barra escura fixa */
.cs-barra-dentro { max-width: 1280px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* conteúdo da barra */
.cs-marca { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: #fff; text-decoration: none; } /* logótipo */
.cs-marca-icone { width: 32px; height: 32px; border-radius: 9px; background: var(--cs-marca); color: var(--cs-destaque); display: inline-flex; align-items: center; justify-content: center; } /* quadrado do ícone */
.cs-marca-sms { color: var(--cs-destaque); }               /* "SMS" em âmbar */
.cs-ligacoes { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } /* ligações do menu */
.cs-ligacao { color: #cbd5e1; text-decoration: none; padding: 7px 11px; border-radius: 8px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } /* uma ligação */
.cs-ligacao:hover { background: rgba(255, 255, 255, .08); color: #fff; } /* ao passar */
.cs-ligacao.activa { background: var(--cs-marca); color: #fff; } /* página actual */
@media (min-width: 901px) {  /* ecrãs largos: o menu do cliente (6 ligações) cabe numa linha (a barra tem no máximo 1280 px) */
  .cs-barra-dentro { gap: 10px; }                          /* menos espaço entre blocos */
  .cs-ligacao { padding: 6px 7px; font-size: 13px; gap: 5px; } /* ligações mais compactas */
  .cs-nome-do-utilizador { display: none; }                /* o nome sai da barra (o saldo fica) */
}
@media (min-width: 901px) and (max-width: 1180px) {  /* portáteis pequenos: só os ícones (o nome aparece no rato) */
  .cs-ligacao span { display: none; }                      /* sem o texto */
  .cs-ligacao { padding: 7px 10px; font-size: 16px; }      /* ícones maiores */
}
.cs-direita { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* lado direito */
.cs-saldo-da-barra { background: rgba(245, 166, 35, .15); color: var(--cs-destaque); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; } /* saldo */
.cs-botao-da-barra { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #e2e8f0; border-radius: 8px; padding: 5px 9px; font-size: 13px; } /* botões pequenos */
.cs-botao-da-barra:hover { background: rgba(255, 255, 255, .08); } /* ao passar */
.cs-botao-da-barra.activo { background: #fff; color: #0f172a; } /* idioma escolhido */
.cs-nome-do-utilizador { font-size: 13px; color: #94a3b8; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* quem está ligado */
/* ── FIM — Barra de navegação ── */

/* ── INÍCIO — Caixas e cartões ── */
.cs-caixa { background: var(--cs-caixa); border: 1px solid var(--cs-borda); border-radius: 14px; box-shadow: var(--cs-sombra); padding: 18px; margin-bottom: 16px; min-width: 0; } /* caixa */
.cs-seccao { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--cs-marca); margin-bottom: 12px; } /* título de secção */
.cs-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } /* grelha de cartões */
.cs-cartao { background: var(--cs-caixa); border: 1px solid var(--cs-borda); border-left: 4px solid var(--cs-marca); border-radius: 12px; padding: 12px 14px; box-shadow: var(--cs-sombra); } /* cartão */
.cs-cartao-rotulo { font-size: 12px; color: var(--cs-texto-suave); } /* rótulo */
.cs-cartao-valor { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } /* número */
.cs-cartao.ambar { border-left-color: var(--cs-destaque); } /* destaque */
.cs-cartao.verde { border-left-color: var(--cs-verde); }   /* bom */
.cs-cartao.vermelho { border-left-color: var(--cs-vermelho); } /* mau */
.cs-duas-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; } /* formulário | resumo */
.cs-rotulo { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; } /* rótulo de campo */
.cs-ajuda { font-size: 12px; color: var(--cs-texto-suave); margin-top: 4px; } /* ajuda */
.cs-vazio { text-align: center; color: var(--cs-texto-suave); padding: 18px; } /* lista vazia */
/* ── FIM — Caixas e cartões ── */

/* ── INÍCIO — Tabelas ── */
.cs-tabela { width: 100%; font-size: 13.5px; margin: 0; } /* tabela */
.cs-tabela th { font-size: 11px; text-transform: uppercase; color: var(--cs-texto-suave); font-weight: 700; background: transparent; } /* cabeçalho */
.cs-tabela td, .cs-tabela th { vertical-align: middle; color: var(--cs-texto); border-color: var(--cs-borda); background: transparent; } /* células */
.cs-texto-curto { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cs-texto-suave); } /* texto cortado */
.cs-estado { font-weight: 700; font-size: 12.5px; white-space: nowrap; } /* estado */
.cs-estado.pendente { color: var(--cs-ambar); }            /* na fila */
.cs-estado.enviada { color: var(--cs-marca); }             /* enviada */
.cs-estado.entregue, .cs-estado.aprovado, .cs-estado.activa { color: var(--cs-verde); } /* bom */
.cs-estado.falhou, .cs-estado.recusado, .cs-estado.suspensa { color: var(--cs-vermelho); } /* mau */
.cs-paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; margin-top: 12px; font-size: 13px; color: var(--cs-texto-suave); flex-wrap: wrap; } /* barra das páginas */
.cs-paginacao-esquerda, .cs-paginacao-direita { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } /* cada lado */
.cs-paginacao-escolha { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; } /* "Mostrar [10] por página" e "Ir para" */
.cs-paginacao-tamanho { width: auto; padding-right: 28px; } /* 10/25/50/100 */
.cs-paginacao-ir { width: 72px; }                          /* campo da página */
.cs-paginacao .page-link { min-width: 32px; text-align: center; color: var(--cs-texto); background: var(--cs-caixa); border-color: var(--cs-borda); } /* botões */
.cs-paginacao .page-item.active .page-link { background: var(--cs-marca); border-color: var(--cs-marca); color: #fff; } /* página actual */
.cs-paginacao .page-item.disabled .page-link { color: var(--cs-texto-suave); background: var(--cs-caixa); opacity: .6; } /* sem efeito */
@media (max-width: 600px) { .cs-paginacao, .cs-paginacao-direita { justify-content: center; } .cs-paginacao-esquerda { justify-content: center; width: 100%; } } /* telemóvel: centrado */
.cs-numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* números à direita */
/* ── FIM — Tabelas ── */

/* ── INÍCIO — Botões e formulários ── */
.btn-primary { background: var(--cs-marca); border-color: var(--cs-marca); } /* botão principal */
.btn-primary:hover, .btn-primary:focus { background: var(--cs-marca-escura); border-color: var(--cs-marca-escura); } /* ao passar */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0f1726; border-color: var(--cs-borda); color: var(--cs-texto); } /* campos escuros */
html[data-theme="dark"] .form-control::placeholder { color: #7c8aa0; opacity: 1; } /* exemplos dentro das caixas legíveis no escuro (contraste 5,1:1) */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); } /* ícone do calendário visível no escuro */
html[data-theme="dark"] .modal-content { background: var(--cs-caixa); color: var(--cs-texto); } /* janelas escuras */
html[data-theme="dark"] .btn-close { filter: invert(1); }  /* cruz visível */
html[data-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #475569; } /* botões claros */
.cs-escolhas { display: flex; flex-wrap: wrap; gap: 8px; } /* caixas de escolha */
.cs-escolha { border: 1px solid var(--cs-borda); border-radius: 10px; padding: 6px 10px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } /* uma escolha */
/* ── FIM — Botões e formulários ── */

/* ── INÍCIO — Janelas (modais): pelo menos 70% da largura (regra 11) ── */
.cs-janela { max-width: none; width: 76vw; }               /* 76% da largura do ecrã */
@media (max-width: 600px) { .cs-janela { width: auto; } }  /* telemóvel: a largura toda */
/* ── FIM — Janelas ── */

/* ── INÍCIO — Aviso no canto ── */
.cs-aviso { position: fixed; right: 18px; bottom: 18px; z-index: 2000; max-width: min(420px, calc(100vw - 36px)); background: #0f172a; color: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 14px; } /* aviso */
.cs-aviso.ok { background: var(--cs-verde); }              /* sucesso */
.cs-aviso.erro { background: var(--cs-vermelho); }         /* erro */
/* ── FIM — Aviso no canto ── */

/* ── INÍCIO — Ecrãs pequenos ── */
@media (max-width: 900px) {
  .cs-duas-colunas { grid-template-columns: minmax(0, 1fr); } /* uma coluna */
  .cs-nome-do-utilizador { display: none; }                /* poupa espaço */
}
@media (max-width: 600px) {
  .cs-conteudo { padding: 12px 12px 30px; }                /* menos margem */
  .cs-barra-dentro { padding: 8px 12px; }                  /* menos margem */
  .cs-ligacao { padding: 6px 8px; font-size: 13px; }       /* ligações mais pequenas */
  .cs-ligacoes { order: 3; flex-basis: 100%; }             /* menu numa linha própria, por baixo */
  .cs-direita { flex: 1; justify-content: flex-end; }      /* botões à direita do logótipo */
  .cs-cartao-valor { font-size: 20px; }                    /* números mais pequenos */
}
/* ── FIM — Ecrãs pequenos ── */