/* ==========================================================================
   Area do Piloto - SaaS Autonomo Plano 15
   Mobile-first de verdade: o piloto abre isto no celular, no kartodromo,
   com 4G ruim. 375px e o caso BASE; media queries so pra cima.
   Zero cor hardcoded que nao seja fallback de var() - a identidade do tenant
   entra por --theme-* injetado pela casca (_piloto_page).
   ========================================================================== */

:root {
    --mc-bg: #f4f5f8;
    --mc-surface: #ffffff;
    --mc-line: rgba(0, 0, 0, .09);
    --mc-text: #14161d;
    --mc-text-2: rgba(0, 0, 0, .62);
    --mc-text-3: rgba(0, 0, 0, .45);
    --mc-radius: 14px;
    --mc-gap: 14px;
    --mc-touch: 44px;
    --mc-tabbar-h: 58px;
    --mc-ok: #12805c;
    --mc-ok-bg: rgba(18, 128, 92, .1);
    --mc-warn: #9a6400;
    --mc-warn-bg: rgba(154, 100, 0, .1);
    --mc-danger: #b3261e;
    --mc-danger-bg: rgba(179, 38, 30, .1);
}

.mc-body {
    margin: 0;
    background: var(--mc-bg);
    color: var(--mc-text);
    font-family: var(--font-text, "Open Sans", system-ui, -apple-system, sans-serif);
    /* a tab bar e fixa: sem isto o ultimo card fica embaixo dela */
    padding-bottom: calc(var(--mc-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.mc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    background: var(--theme-primary, #1f2a44);
    color: #fff;
    position: sticky; top: 0; z-index: 20;
}
.mc-topbar strong { font-family: var(--font-title, inherit); font-size: 1rem; }
.mc-topbar-logo img { display: block; height: 28px; max-width: 150px; width: auto; object-fit: contain; }
.mc-topbar a {
    color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
}
.mc-topbar > a:last-child {
    min-height: 38px; display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
}
.mc-topbar > a:last-child:hover,
.mc-topbar > a:last-child:focus-visible { background: rgba(255, 255, 255, .18); }

.mc-main { padding: var(--mc-gap); max-width: 1100px; margin: 0 auto; }

/* ── Contexto (seletor de campeonato) ───────────────────────────────────── */
.mc-contexto {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: var(--mc-gap);
    background: rgba(var(--theme-primary-rgb, 41, 44, 97), .07);
    border: 1px solid rgba(var(--theme-primary-rgb, 41, 44, 97), .18);
    border-radius: var(--mc-radius);
    font-size: .9rem;
}
.mc-contexto svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: .75; }
.mc-contexto strong { font-weight: 700; }
.mc-contexto-acao { margin-left: auto; }
.mc-contexto select {
    font: inherit; padding: 8px 10px; min-height: var(--mc-touch);
    border-radius: 10px; border: 1px solid var(--mc-line);
    background: var(--mc-surface); color: inherit; max-width: 100%;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.mc-card {
    background: var(--mc-surface); border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius); padding: 16px;
    margin-bottom: var(--mc-gap);
}
.mc-card-hero {
    background: var(--gradient-hero, linear-gradient(135deg, #292c61 0%, #14161d 100%));
    color: #fff; border: none;
}
.mc-card-hero .mc-card-rotulo { color: rgba(255, 255, 255, .75); }
.mc-card-rotulo {
    font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 700; color: var(--mc-text-3); margin: 0 0 6px;
}
.mc-card h2 { font-family: var(--font-title, inherit); font-size: 1.15rem; margin: 0 0 4px; }
.mc-card p { margin: 0 0 6px; }

.mc-secao-titulo {
    font-family: var(--font-title, inherit); font-size: .95rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--mc-text-2); margin: 22px 0 10px;
}

/* ── KPIs ───────────────────────────────────────────────────────────────── */
.mc-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--mc-gap); }
.mc-kpi {
    background: var(--mc-surface); border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius); padding: 14px;
}
.mc-kpi-valor {
    font-family: var(--font-title, inherit); font-size: 1.6rem;
    font-weight: 800; line-height: 1.1; color: var(--theme-primary, #292c61);
}
.mc-kpi-rotulo { font-size: .78rem; color: var(--mc-text-3); margin-top: 2px; }

/* ── Linhas de lista (nunca tabela no mobile) ───────────────────────────── */
.mc-lista { display: flex; flex-direction: column; gap: 8px; }
.mc-linha {
    display: flex; align-items: center; gap: 12px;
    background: var(--mc-surface); border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius); padding: 12px 14px;
    text-decoration: none; color: inherit; min-height: var(--mc-touch);
}
a.mc-linha:hover, a.mc-linha:focus-visible { border-color: rgba(var(--theme-primary-rgb, 41, 44, 97), .45); }
.mc-linha-corpo { flex: 1; min-width: 0; }
.mc-linha-titulo { font-weight: 700; font-size: .95rem; }
.mc-linha-sub { font-size: .8rem; color: var(--mc-text-3); }
.mc-linha-valor { font-weight: 800; font-family: var(--font-title, inherit); white-space: nowrap; }

/* ── Reivindicacao de cadastro (12/08/2026) ──────────────────────────────
   O buraco da foto E o convite: sem selo, sem badge, sem "cadastro nao
   reivindicado" apontando o dedo pro piloto. Nao caberia texto na linha em
   375px de qualquer jeito, e um selo marcaria 58% das linhas na FKART - o
   que vira ruido de fundo e, de quebra, publica a lista de quem nao tem
   dono. O avatar tracejado e o unico affordance.
   NAO reusar .mc-foto aqui: aquilo e o container flex do upload. */
.mc-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; background: var(--mc-line);
}
.mc-avatar-vazio {
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 2px dashed rgba(var(--theme-primary-rgb, 41, 44, 97), .55);
    color: rgba(var(--theme-primary-rgb, 41, 44, 97), .85);
    font-size: 1.3rem; font-weight: 700; line-height: 1;
}
/* Ja tem dono: continua na lista porque a pessoa se localiza pelo contexto
   de quem esta em volta, mas nao e alvo de toque. */
.mc-linha-inativa { opacity: .55; }

/* Consentimento (LGPD art. 14 par. 1: "especifico e em destaque").
   O obrigatorio NAO pode ser o quinto item de uma lista cinza - ele fica
   sozinho, com borda e fundo proprios, e o texto integral visivel sem
   clique. Link para o texto nao e destaque. */
.mc-consent { padding: 12px 0; border-top: 1px solid var(--mc-line); }
.mc-consent:first-of-type { border-top: 0; }
.mc-consent-destaque {
    border: 1px solid rgba(var(--theme-primary-rgb, 41, 44, 97), .4);
    border-radius: var(--mc-radius);
    background: rgba(var(--theme-primary-rgb, 41, 44, 97), .04);
    padding: 14px; margin-bottom: 14px;
}
.mc-consent-check { display: flex; gap: 10px; align-items: flex-start; }
.mc-consent-check input[type="checkbox"] {
    /* alvo de toque de 24px num checkbox de 16 nao da: o iOS considera a
       area do proprio input, entao ele cresce */
    width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
}
.mc-consent-check label { font-size: .9rem; font-weight: 600; cursor: pointer; }
.mc-consent-destaque .mc-consent-check label { font-size: .98rem; font-weight: 700; }
.mc-consent-texto {
    margin-top: 10px; font-size: .82rem; line-height: 1.5;
    color: var(--mc-text-2);
    max-height: 260px; overflow-y: auto;
    padding: 10px 12px; border-radius: 10px;
    background: var(--mc-surface); border: 1px solid var(--mc-line);
}
.mc-consent-texto summary { cursor: pointer; font-weight: 600; }
details.mc-consent-texto { max-height: none; overflow: visible; }
details.mc-consent-texto > div { margin-top: 8px; max-height: 260px; overflow-y: auto; }

/* data em bloco: leitura de calendario */
.mc-data {
    flex-shrink: 0; text-align: center; min-width: 46px;
    border-right: 1px solid var(--mc-line); padding-right: 12px;
}
.mc-data span { display: block; font-size: .66rem; text-transform: uppercase; color: var(--mc-text-3); letter-spacing: .06em; }
.mc-data strong { display: block; font-size: 1.3rem; font-family: var(--font-title, inherit); line-height: 1.1; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.mc-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.mc-badge-ok { background: var(--mc-ok-bg); color: var(--mc-ok); }
.mc-badge-warn { background: var(--mc-warn-bg); color: var(--mc-warn); }
.mc-badge-danger { background: var(--mc-danger-bg); color: var(--mc-danger); }
.mc-badge-neutro { background: rgba(0, 0, 0, .06); color: var(--mc-text-2); }

/* ── Botoes ─────────────────────────────────────────────────────────────── */
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--mc-touch); padding: 11px 18px; border-radius: 999px;
    font: inherit; font-weight: 700; font-size: .9rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.mc-btn-primario { background: var(--theme-accent, var(--theme-primary, #292c61)); color: #fff; }
.mc-btn-claro { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .4); }
.mc-btn-neutro { background: var(--mc-surface); color: var(--mc-text); border-color: var(--mc-line); }
.mc-btn-bloco { width: 100%; }
.mc-btn:focus-visible { outline: 2px solid var(--theme-accent, #292c61); outline-offset: 2px; }
.mc-btn:disabled, .mc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mc-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── Estado vazio ───────────────────────────────────────────────────────── */
.mc-vazio { text-align: center; padding: 26px 16px; color: var(--mc-text-2); }
.mc-vazio h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--mc-text); }
.mc-vazio p { margin: 0 auto; max-width: 42ch; font-size: .9rem; }

/* ── Tab bar (mobile) ───────────────────────────────────────────────────── */
.mc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; background: var(--mc-surface);
    border-top: 1px solid var(--mc-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mc-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    min-height: var(--mc-tabbar-h); padding: 8px 4px;
    text-decoration: none; color: var(--mc-text-3); font-size: .68rem; font-weight: 600;
}
.mc-tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-tab.is-active { color: var(--theme-primary, #292c61); }
.mc-tab:focus-visible { outline: 2px solid var(--theme-primary, #292c61); outline-offset: -3px; }

/* ── Corrida (data em bloco + corpo) ────────────────────────────────────── */
.mc-corrida { display: flex; align-items: center; gap: 12px; }
.mc-card-hero .mc-data { border-right-color: rgba(255, 255, 255, .28); }
.mc-card-hero .mc-data span,
.mc-card-hero .mc-linha-sub { color: rgba(255, 255, 255, .78); }
.mc-card-hero .mc-badge-warn { background: rgba(255, 255, 255, .2); color: #fff; }

.mc-raceday {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .85rem;
}
.mc-card:not(.mc-card-hero) .mc-raceday { border-top-color: var(--mc-line); }

.mc-erro-inline {
    display: block; width: 100%; margin-top: 6px;
    font-size: .82rem; font-weight: 600; color: var(--mc-danger);
}
.mc-card-hero .mc-erro-inline { color: #ffd7d4; }

.mc-titulo {
    font-family: var(--font-title, inherit); font-size: 1.45rem;
    margin: 4px 0 16px;
}

/* ── Formulario ─────────────────────────────────────────────────────────── */
.mc-campo { margin-bottom: 14px; }
.mc-campo label {
    display: block; font-size: .8rem; font-weight: 700;
    color: var(--mc-text-2); margin-bottom: 5px;
}
.mc-campo input, .mc-campo select, .mc-campo textarea {
    width: 100%; font: inherit;
    /* 16px evita o zoom automatico do iOS ao focar o campo */
    font-size: var(--mc-fs-input, 1rem);
    min-height: var(--mc-touch); padding: 10px 12px;
    border: 1px solid var(--mc-line); border-radius: 10px;
    background: var(--mc-surface); color: var(--mc-text);
}
.mc-campo input:disabled { background: rgba(0, 0, 0, .04); color: var(--mc-text-3); }
.mc-campo input:focus-visible, .mc-campo select:focus-visible {
    outline: 2px solid var(--theme-primary, #292c61); outline-offset: 1px;
}
.mc-campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc-hint { display: block; font-size: .76rem; color: var(--mc-text-3); margin-top: 4px; }
.mc-texto { font-size: .9rem; color: var(--mc-text-2); margin: 0 0 10px; }

/* campo travado (e-mail/CPF) + botao de pedir alteracao, e o campo de
   apelido com botao Salvar ao lado. Em 375px o botao desce pra linha de
   baixo em vez de espremer o input. */
.mc-campo-travado { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mc-campo-travado input { flex: 1 1 180px; min-width: 0; }
/* "sm" e sobre o PADDING e a fonte, nao sobre o alvo de toque: a altura
   minima continua sendo --mc-touch. Alvo menor que isso e dedo errando
   botao no celular, que e onde esta area vive. */
.mc-btn-sm { min-height: var(--mc-touch); padding: 8px 14px; font-size: .82rem; }

.mc-pedido {
    margin-top: 10px; padding: 12px;
    border: 1px dashed var(--mc-line); border-radius: var(--mc-radius);
    background: rgba(0, 0, 0, .02);
}
.mc-pedido label { font-size: .78rem; }
.mc-pedido .mc-acoes { margin-top: 10px; }

.mc-campo input[aria-invalid="true"] { border-color: var(--mc-danger); }

.mc-foto { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mc-foto img {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--mc-line); flex-shrink: 0; background: #eee;
}
/* o label vira o botao (o input file fica hidden) - precisa do cursor */
.mc-foto label { cursor: pointer; display: inline-flex; }

/* ── Modal de recorte da foto ───────────────────────────────────────────── */
.mc-crop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, .72);
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.mc-crop[hidden] { display: none; }
.mc-crop-box {
    background: var(--mc-surface); border-radius: var(--mc-radius);
    width: 100%; max-width: 460px; overflow: hidden;
    display: flex; flex-direction: column;
}
/* altura limitada pela viewport: no celular deitado o modal nao pode
   empurrar os botoes pra fora da tela */
.mc-crop-area { background: #111; max-height: 62vh; overflow: hidden; }
.mc-crop-area img { display: block; max-width: 100%; }
.mc-crop-acoes {
    display: flex; align-items: center; gap: 8px;
    padding: 12px; flex-wrap: wrap;
}

.mc-switch {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--mc-touch); cursor: pointer; font-size: .9rem;
}
.mc-switch input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--theme-primary, #292c61); }

.mc-aviso {
    padding: 11px 14px; border-radius: var(--mc-radius);
    margin-bottom: var(--mc-gap); font-size: .88rem; font-weight: 600;
}
.mc-aviso.is-ok { background: var(--mc-ok-bg); color: var(--mc-ok); }
.mc-aviso.is-erro { background: var(--mc-danger-bg); color: var(--mc-danger); }

.mc-perigo {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--mc-line);
}
.mc-perigo strong { display: block; color: var(--mc-danger); margin-bottom: 6px; }
.mc-btn-danger { background: var(--mc-danger); color: #fff; }

.mc-rodape { text-align: center; padding: 20px 16px 28px; font-size: .85rem; }
.mc-rodape a { color: var(--mc-text-2); font-weight: 700; text-decoration: none; }

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .mc-kpis { grid-template-columns: repeat(4, 1fr); }
    .mc-main { padding: 22px; }
}
@media (min-width: 1024px) {
    /* no desktop a navegacao volta pro topo: tab bar e padrao de celular */
    .mc-tabbar {
        position: sticky; top: 0; bottom: auto;
        max-width: 1100px; margin: 0 auto 18px;
        border: 1px solid var(--mc-line); border-radius: var(--mc-radius);
    }
    .mc-tab { flex-direction: row; gap: 8px; font-size: .85rem; min-height: 50px; }
    .mc-body { padding-bottom: 0; }
}