/* Sistema visual da app de Gestão de Manutenção de Equipamentos
     (paleta Tailwind + cor de marca "brand" ciano, cartões rounded-2xl,
     ícones lucide). Mantidos todos os seletores que o markup e o script usam. */
  :root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --brand-50: #ecfeff;
    --brand-200: #a5f3fc;
    --brand-500: #06b6d4;
    --brand-600: #0891b2;
    --brand-700: #0e7490;
    --rose-50: #fff1f2;
    --rose-100: #ffe4e6;
    --rose-600: #e11d48;
    --emerald-50: #ecfdf5;
    --emerald-700: #047857;
    --raio: 1rem;            /* rounded-2xl, como o .card da app */
    --raio-lg: 0.5rem;       /* rounded-lg, para campos e botões */
    --sombra: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
    --sombra-modal: 0 20px 40px rgb(15 23 42 / 0.18);
  }
  * { box-sizing: border-box; }
  body {
    font-family: system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: var(--slate-50);
    color: var(--slate-900);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .app {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 24px 40px;
  }

  /* Ícones lucide: traço de 2, extremidades redondas */
  svg.icone {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* --- Cabeçalho --- */
  .cabecalho {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px 26px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
  }
  .cabecalho-texto { min-width: 0; }

  /* --- Separadores principais (Instalação / Registos / Configuração) --- */
  .tabs-app {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 6px;
    margin-bottom: 20px;
  }
  .tab-app {
    flex: 1;
    background: none;
    border: none;
    border-radius: var(--raio-lg);
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .tab-app:hover { background: var(--slate-50); color: var(--slate-800); }
  .tab-app.ativa { background: var(--brand-600); color: #fff; }
  .painel-tab.oculto { display: none; }
  h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0 0 2px;
    line-height: 1.3;
  }
  .subtitulo {
    color: var(--slate-500);
    margin: 0;
    font-size: 0.875rem;
  }

  /* --- Cartões --- */
  .card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px 24px 22px;
    margin-bottom: 16px;
  }
  .card h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    border-bottom: 1px solid var(--slate-200);
    padding-bottom: 12px;
    margin: 0 0 18px;
  }
  .card h2 svg { color: var(--brand-600); }

  /* --- Campos --- */
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
  }
  .row:last-child { margin-bottom: 0; }
  .field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
  }
  .field.full { flex: 1 1 100%; }
  label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--slate-700);
  }
  input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], textarea, select {
    padding: 8px 12px;
    border: 1px solid var(--slate-300);
    border-radius: var(--raio-lg);
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
    color: var(--slate-900);
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  input::placeholder, textarea::placeholder { color: var(--slate-400); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgb(6 182 212 / 0.25);
  }
  input:invalid, select:invalid { box-shadow: none; }

  /* --- Opções em pastilha (o mesmo tratamento do menu ativo da app) --- */
  .radio-group, .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .radio-option, .checkbox-option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--slate-100);
    color: var(--slate-700);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .radio-option:hover, .checkbox-option:hover {
    background: var(--slate-200);
  }
  .radio-option:has(input:checked), .checkbox-option:has(input:checked) {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-200);
    font-weight: 600;
  }
  .radio-option input, .checkbox-option input {
    cursor: pointer;
    accent-color: var(--brand-600);
  }

  /* --- Tabelas --- */
  .material-table, table.registos {
    width: 100%;
    border-collapse: collapse;
  }
  .material-table th, .material-table td,
  table.registos th, table.registos td {
    text-align: left;
    padding: 10px 8px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--slate-100);
  }
  .material-table th, table.registos th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate-500);
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
  }
  .material-table tbody tr:hover, table.registos tbody tr:hover {
    background: var(--slate-50);
  }
  .material-table input[type="number"] { width: 100px; }
  .tabela-scroll { overflow-x: auto; }
  .tabela-artes input[type="number"],
  .tabela-artes input[type="text"] { width: 88px; }
  .tabela-artes select { width: 82px; }

  .oculto { display: none !important; }

  /* --- Botões --- */
  .botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    border: none;
    border-radius: var(--raio-lg);
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s ease, opacity 0.15s ease;
  }
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-primario { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05); }
  .btn-primario:hover:not(:disabled) { background: var(--brand-700); }
  .btn-secundario { background: var(--slate-100); color: var(--slate-700); }
  .btn-secundario:hover:not(:disabled) { background: var(--slate-200); }
  .btn-perigo { background: var(--rose-50); color: var(--rose-600); }
  .btn-perigo:hover:not(:disabled) { background: var(--rose-100); }
  .btn-mini { padding: 6px 12px; font-size: 0.8125rem; }
  .btn-mini svg { width: 14px; height: 14px; }

  /* --- Avisos e mensagens --- */
  .aviso {
    font-size: 0.875rem;
    color: var(--slate-500);
    margin-top: 4px;
  }
  .aviso a { color: var(--brand-600); }
  .mensagem {
    padding: 12px 16px;
    border-radius: var(--raio-lg);
    margin-bottom: 16px;
    font-size: 0.875rem;
    display: none;
  }
  .mensagem.sucesso {
    background: var(--emerald-50);
    color: var(--emerald-700);
    box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.15);
    display: block;
  }
  .mensagem.erro {
    background: var(--rose-50);
    color: var(--rose-600);
    box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.15);
    display: block;
  }
  .sem-registos {
    color: var(--slate-500);
    font-size: 0.875rem;
    text-align: center;
    padding: 16px 0;
  }
  .paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
  }
  .paginacao-texto {
    font-size: 0.8125rem;
    color: var(--slate-500);
  }

  /* --- Rodapé (o mesmo da app de Gestão de Manutenção) --- */
  .rodape {
    border-top: 1px solid var(--slate-200);
    background: #fff;
    padding: 12px 24px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--slate-400);
    margin: 0;
  }
  .rodape div { line-height: 1.6; }

  /* --- Modais --- */
  .modal-fundo {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgb(15 23 42 / 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
  }
  .modal-caixa {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--raio);
    padding: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--sombra-modal);
  }
  .modal-caixa h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0 0 16px;
  }
  .modal-caixa h2 svg { color: var(--brand-600); }
  .modal-caixa .field { margin-bottom: 14px; }
  .modal-caixa-larga { max-width: 640px; }

  /* --- Ecrã de login --- */
  .login-fundo {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, var(--slate-900), var(--slate-800) 55%, var(--brand-700));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
  }
  .login-caixa {
    background: #fff;
    border-radius: var(--raio);
    box-shadow: var(--sombra-modal);
    padding: 36px 32px 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
  }
  .login-logo { height: 52px; margin-bottom: 18px; }
  .login-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0 0 4px;
  }
  .login-titulo svg { color: var(--brand-600); }
  .login-subtitulo { color: var(--slate-500); font-size: 0.8125rem; margin: 0 0 22px; }
  .login-caixa .field { text-align: left; margin-bottom: 14px; }
  .login-erro {
    background: var(--rose-50);
    color: var(--rose-600);
    font-size: 0.8125rem;
    padding: 8px 12px;
    border-radius: var(--raio-lg);
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.15);
  }
  .login-botao { width: 100%; justify-content: center; padding: 10px; margin-top: 4px; }

  /* --- Botão de Configurações no cabeçalho --- */
  .btn-configuracoes { margin-left: auto; flex-shrink: 0; }

  /* --- Modal de Configurações --- */
  .config-abas {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--slate-200);
    margin-bottom: 18px;
  }
  .config-aba {
    background: none;
    border: none;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--slate-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .config-aba:hover:not(:disabled) { color: var(--slate-800); background: none; }
  .config-aba.ativa { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: 600; }
  .config-conteudo { padding-right: 4px; }
  .config-subtitulo {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    margin: 20px 0 12px;
  }
  .lista-emails {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .lista-emails li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--raio-lg);
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--slate-800);
  }
  .pill-perfil {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
  }
  .pill-perfil.admin { background: var(--brand-50); color: var(--brand-700); }
  .pill-perfil.tecnico { background: var(--slate-100); color: var(--slate-700); }

  #printArea { display: none; }

  @media print {
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px;
    }
    #printArea h1 { font-size: 1.3rem; text-align: center; }
    #printArea table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
    #printArea th, #printArea td { border: 1px solid #999; padding: 6px 8px; font-size: 0.85rem; text-align: left; }
    #printArea .secao-titulo { font-weight: bold; margin-top: 16px; margin-bottom: 6px; color: #0e7490; }
  }