/* =====================================================================
   The new look, step 1 of the design review (Pedro, 21/10/2026, «a»): the base that every page shares — panels,
   tables, buttons, fields, labels, notices, empty states and the number cards — with the Tabler's manners
   (github.com/tabler/tabler, MIT, only as a reference: nothing of it is loaded) and the colours of the company's
   tools (shell.css). The same as the Resultados (fp.css). Everything is under :root[data-estilo="novo"], on for
   everyone since 21/10/2026 («b»); only the administrator can still see the old look, to compare
   (context_processors.style, Definições › Amostras de design). Only the look: what is written never depends on it.
   ===================================================================== */

/* The bar that says the new look is on, and the comparison of Amostras de design (always: they are the tools) */
.shell .style-preview-bar { margin: 0 0 16px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.shell .design-row { margin-top: 16px; }
.shell .design-compare { display: flex; flex-wrap: wrap; gap: 24px; }
.shell .design-compare figure { margin: 0; }
.shell .design-compare figcaption { margin-bottom: 8px; font-weight: 600; }
.shell .design-compare iframe { display: block; width: 360px; max-width: calc(100vw - 32px); height: 78vh; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg); }

:root[data-estilo="novo"] {
  /* the corners are shell.css's (--radius, --radius-panel), since 03/11/2026 */
  --head-bg: #f5f5f7;
  --soft-ok: #e3f2e9;
  --soft-warn: #fff4e0;
  --soft-bad: #fde8ea;
  --soft-info: #e7f4fa;
  --ring: rgba(0, 102, 204, 0.22);
  --button-shadow: none;  /* flat buttons (Pedro, 31/10/2026: «Botões planos»; was 0 1px 2px #1023371a) */
}

/* Panels: a card with its heading over a line, as the Resultados */
:root[data-estilo="novo"] .shell .panel,
:root[data-estilo="novo"] .shell .dash-panel { border-radius: var(--radius-panel); }
:root[data-estilo="novo"] .shell .panel > .panel-heading:first-child { margin: -20px -20px 18px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
:root[data-estilo="novo"] .shell .table-panel > .panel-heading:first-child { margin: 0; padding: 14px 20px; }
:root[data-estilo="novo"] .shell .panel-heading h2 { font-size: 15px; font-weight: 600; }
:root[data-estilo="novo"] .shell .dash-panel > .panel-title:first-child { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }  /* their padding varies: no full-width line */

/* Tables: heading with a background, small capitals, a line per row */
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) thead th { padding-top: 10px; padding-bottom: 10px; background: var(--head-bg); color: var(--muted); font-size: 12px; font-weight: 600; }
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) td,
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) tbody th { vertical-align: middle; }
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) tbody th[scope="row"] a { color: var(--text); text-decoration: none; }
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) tbody th[scope="row"] a:hover { color: var(--link); text-decoration: underline; }
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) tfoot th,
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) tfoot td { border-top: 2px solid var(--border); font-weight: 650; }
:root[data-estilo="novo"] .shell :is(.table, .people-table, .pay-table):not([class*="grid"]) .group-row th { font-size: 12px; }

/* Buttons: the same colours, a softer edge and a clear state when pressed or unavailable */
:root[data-estilo="novo"] .shell .button,
:root[data-estilo="novo"] .shell button.button { box-shadow: var(--button-shadow); transition: background-color 0.15s, border-color 0.15s; }
:root[data-estilo="novo"] .shell .button-secondary { box-shadow: none; }
:root[data-estilo="novo"] .shell .button-danger { border-color: var(--bad-line); background: var(--soft-bad); color: var(--bad-text); }
:root[data-estilo="novo"] .shell .button-danger:hover { background: #fbd9dd; }
:root[data-estilo="novo"] .shell .button:disabled,
:root[data-estilo="novo"] .shell .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
:root[data-estilo="novo"] .shell .chip-link { border-radius: var(--radius); padding: 4px 12px; }  /* as the section chips at the top, not a round pill (22/10/2026) */
:root[data-estilo="novo"] .shell .chip-link[aria-current="page"] { border-color: var(--blue); background: var(--blue); color: #fff; }
:root[data-estilo="novo"] .shell .chip-link.is-current { border-color: var(--blue); background: var(--blue); color: #fff; }
:root[data-estilo="novo"] .shell .chip-link.is-done { border-color: var(--ok-line); background: var(--soft-ok); color: var(--good); }

/* Fields: the label above in bold, a blue ring when writing, red when wrong */
:root[data-estilo="novo"] .shell .field label { font-size: 13px; font-weight: 600; }
:root[data-estilo="novo"] .shell :where(input, select, textarea):focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); outline: none; }
:root[data-estilo="novo"] .shell :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad); }
:root[data-estilo="novo"] .shell :where(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--soft-bad); }
:root[data-estilo="novo"] .shell .field-error::before { content: "! "; content: "! " / ""; font-weight: 800; }

/* Labels: soft colour behind, as the Tabler's badges; the word always says the state */
:root[data-estilo="novo"] .shell .pill { padding: 2px 9px; border-color: transparent; background: var(--hover); font-weight: 600; }
:root[data-estilo="novo"] .shell .pill-ok { background: var(--soft-ok); color: var(--good); }
:root[data-estilo="novo"] .shell .pill-warn { background: var(--soft-warn); color: var(--warn-text); }
:root[data-estilo="novo"] .shell .pill-alert { background: var(--soft-bad); color: var(--bad-text); }
:root[data-estilo="novo"] .shell .pill-info { background: var(--soft-info); color: var(--link); }

/* Notices: a card with a coloured edge and its sign, as the Resultados' warning */
:root[data-estilo="novo"] .shell .message,
:root[data-estilo="novo"] .shell .alert-box,
:root[data-estilo="novo"] .shell .form-error,
:root[data-estilo="novo"] .shell .private-box { position: relative; padding: 12px 16px 12px 50px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-panel); background: var(--panel); color: var(--text); }
:root[data-estilo="novo"] .shell .message::before,
:root[data-estilo="novo"] .shell .alert-box::before,
:root[data-estilo="novo"] .shell .form-error::before,
:root[data-estilo="novo"] .shell .private-box::before { position: absolute; top: 10px; left: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; }
:root[data-estilo="novo"] .shell .message-success { border-left-color: var(--good); }
:root[data-estilo="novo"] .shell .message-success::before { content: "✓"; content: "✓" / ""; background: var(--soft-ok); color: var(--good); }
:root[data-estilo="novo"] .shell .message-error,
:root[data-estilo="novo"] .shell .form-error { border-left-color: var(--bad); }
:root[data-estilo="novo"] .shell .message-error::before,
:root[data-estilo="novo"] .shell .form-error::before { content: "!"; content: "!" / ""; background: var(--soft-bad); color: var(--bad-text); }
:root[data-estilo="novo"] .shell .alert-box { border-left-color: var(--warn-line); }
:root[data-estilo="novo"] .shell .alert-box::before { content: "!"; content: "!" / ""; background: var(--soft-warn); color: var(--warn-text); }
:root[data-estilo="novo"] .shell .private-box { border-left-color: var(--edit); }
:root[data-estilo="novo"] .shell .private-box::before { content: "🔒"; content: "🔒" / ""; font-size: 12px; }
:root[data-estilo="novo"] .shell .messages { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }

/* Empty states: a dashed card, in the middle */
:root[data-estilo="novo"] .shell .empty { border: 1px dashed var(--border); border-radius: var(--radius-panel); background: transparent; }

/* Number cards and entry cards: separate cards that light up on the mouse */
:root[data-estilo="novo"] .shell .overview-stats { gap: 16px; }
:root[data-estilo="novo"] .shell .overview-stat,
:root[data-estilo="novo"] .shell .hub-card { border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); transition: border-color 0.15s, transform 0.15s; }
:root[data-estilo="novo"] .shell a.overview-stat:hover,
:root[data-estilo="novo"] .shell a.hub-card:hover { border-color: var(--blue); background: #f3fafc; transform: translateY(-1px); }
:root[data-estilo="novo"] .shell .overview-stat .overview-label { font-size: 12px; font-weight: 600; }
:root[data-estilo="novo"] .shell .overview-stat .stat-value { font-size: 28px; font-weight: 650; letter-spacing: -0.4px; }
:root[data-estilo="novo"] .shell .overview-stat { gap: 6px; padding: 16px 18px; }
@media (min-width: 561px) {  /* the cards share the line, as the Resultados' (fp-kpis); the phone keeps two a line */
  :root[data-estilo="novo"] .shell .overview-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
:root[data-estilo="novo"] .shell .overview-stat.is-warn { border-left: 4px solid var(--warn-line); }
:root[data-estilo="novo"] .shell .overview-stat.is-alert { border-left: 4px solid var(--bad); }

/* A secondary button is an outline (phone review, 22/10/2026: the dark theme painted it as the main one, so «Cancelar»
   looked like «Guardar»); the main button stays filled */
:root[data-estilo="novo"] .shell .button-secondary { border: 1px solid var(--border); background: var(--bg); color: var(--link); box-shadow: none; }  /* the Finance's («Carregar caixa»), 25/10/2026 */
:root[data-estilo="novo"] .shell .button-secondary:hover { border-color: var(--brand-line); background: var(--soft-info); color: var(--link); }

/* Separators: the current one underlined in blue */
:root[data-estilo="novo"] .shell .tabs a[aria-current="page"] { border-bottom-color: var(--blue); color: var(--text); }

/* Lists of things to do */
:root[data-estilo="novo"] .shell .task { padding: 14px 0; }

@media (prefers-reduced-motion: reduce) {
  :root[data-estilo="novo"] .shell .button,
  :root[data-estilo="novo"] .shell .overview-stat,
  :root[data-estilo="novo"] .shell .hub-card { transition: none; }
  :root[data-estilo="novo"] .shell a.overview-stat:hover,
  :root[data-estilo="novo"] .shell a.hub-card:hover { transform: none; }
}

/* One identity in every menu (Pedro, 22/10/2026: «corre em todos os menus e submenus … aplica em todos para ficarem
   com a mesma identidade»): what was still in an older look takes the Resultados' (fp.css) manners */
/* The choices of a page (OKR «Geral do clube · Fitness…», Checklist «Hoje · Esta semana…»): as the section chips */
:root[data-estilo="novo"] .shell .goal-tab { min-height: 32px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 13px; font-weight: 600; }
:root[data-estilo="novo"] .shell .goal-tab:hover { background: var(--hover); }
:root[data-estilo="novo"] .shell .goal-tab[aria-current="page"] { border-color: var(--blue); background: var(--blue); color: #fff; }
/* «+ Novo cargo», «+ Nova lead», «+ Novo conteúdo»: a button as the others, not a round pill */
:root[data-estilo="novo"] .shell .ct-add > summary { min-height: 36px; padding: 0 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; box-shadow: var(--button-shadow); }
/* The main buttons: the edge of the same blue as the button (some had a light edge) */
:root[data-estilo="novo"] .shell .button:not(.button-secondary):not(.button-danger):not(.button-add):not(.button-edit),
:root[data-estilo="novo"] .shell .fp-button--primary { border-color: var(--blue); }
/* Largest deviations: a long difference breaks into two lines instead of leaving the card */
:root[data-estilo="novo"] .shell .fp-table--deviations td:last-child { white-space: normal; }
/* A person's page and Início (accounts/includes/kpi_cards.html): a card for each indicator, the bar as the Resultados' */
:root[data-estilo="novo"] .shell .summary-strip { gap: 16px; }
:root[data-estilo="novo"] .shell .summary-group-title { margin: 0 0 6px; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
:root[data-estilo="novo"] .shell .cockpit-kpis { gap: 10px; border: 0; background: transparent; }
:root[data-estilo="novo"] .shell .summary-group + .summary-group .cockpit-kpis { border-left: 0; }
:root[data-estilo="novo"] .shell .cockpit-kpis .cockpit-kpi { gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
:root[data-estilo="novo"] .shell .cockpit-kpis .kpi-label { color: var(--muted); font-size: 12px; font-weight: 600; }
:root[data-estilo="novo"] .shell .cockpit-kpis .cockpit-kpi strong { font-size: clamp(20px, 1.7vw, 26px); font-weight: 650; }
:root[data-estilo="novo"] .shell .cockpit-kpis .kpi-bar { height: 6px; margin: 2px 0; border-radius: 99px; }
:root[data-estilo="novo"] .shell .cockpit-kpis .kpi-bar > span { border-radius: 99px; }
/* A list straight on the page (Pessoas, Fecho, Indicadores, Tarefas, Briefings, Histórico, Cópias, Sessões, Clientes PT,
   Leads…): inside a card, as the Resultados' tables */
:root[data-estilo="novo"] .shell .page-body > .table-wrap { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
:root[data-estilo="novo"] .shell .page-body > .table-wrap.is-stacked { padding: 0 14px; }
/* The older panels (a person's page, Plano de conteúdos, Comercial): the corners and the air of the others */
:root[data-estilo="novo"] .shell :is(.cockpit-panel, .com-card) { padding: 16px 20px; border-color: var(--border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--card-shadow); }
:root[data-estilo="novo"] .shell :is(.cockpit-panel, .com-card) :is(h2, h3) { font-size: 15px; font-weight: 600; }

/* Phone: the panels' padding is smaller there (shell.css), the heading follows it */
@media (max-width: 640px) {
  :root[data-estilo="novo"] .shell .overview-stats { gap: 10px; }
}
@media (max-width: 560px) {
  :root[data-estilo="novo"] .shell .overview-stat .stat-value { font-size: 20px; }  /* two cards a line (shell.css) */
}

/* Phone review (21/10/2026): a title with a long file name breaks into lines instead of widening the page */
.shell h1 { overflow-wrap: anywhere; }