/* ═══════════════════════════════════════════════════════════════
   TEMA DO SISTEMA
   ───────────────────────────────────────────────────────────────
   Arquivo único de estilo do sistema. A ideia é que nenhuma página
   precise de <style> próprio: tudo que for visual mora aqui.

   Como usar:
     1. O arquivo é carregado por partials/head-css.php, DEPOIS do
        app.min.css do template, para poder sobrescrever o que for
        preciso sem !important espalhado.
     2. As cores vêm das variáveis --highdmin-* que o title-meta.php
        já injeta a partir do .env. Aqui só as reempacotamos em nomes
        mais curtos (--c-*), então trocar a cor no .env muda tudo.

   ÍNDICE
     01. Tokens (cores, espaço, tipografia, raio, sombra)
     02. Reset e base
     03. Utilitários
     04. Tipografia
     05. Botões
     06. Formulários
     07. Cartões e superfícies
     08. Tabelas
     09. Badges e etiquetas
     10. Paginação
     11. Abas
     12. Slot de mídia
     13. Modal
     14. Tela de login
     15. Responsivo
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 01. TOKENS ═══════════════════════════════════════════════ */
:root {
    /* Cores — herdadas do tema do .env, reempacotadas em nomes curtos.
       O padrão (após a vírgula) só vale se o .env não definir nada. */
    --c-primary:      var(--highdmin-primary, #1bdf60);
    --c-primary-rgb:  var(--highdmin-primary-rgb, 27, 223, 96);

    /* Tons de chumbo — base neutra da interface, independente da cor
       primária. Usados nas superfícies da tela de entrada. */
    --c-ink-950: #08090b;
    --c-ink-900: #0d0f12;
    --c-ink-850: #111418;
    --c-ink-800: #161a1f;
    --c-ink-700: #1e232a;
    --c-ink-600: #2a3038;
    --c-ink-500: #39414b;
    --c-ink-400: #5b6672;
    --c-ink-300: #8b95a1;
    --c-ink-200: #b8c0c9;
    --c-success:      var(--highdmin-success, #0acf97);
    --c-danger:       var(--highdmin-danger, #f1556c);
    --c-warning:      var(--highdmin-warning, #f9bc0b);
    --c-info:         #3b82f6;

    --c-bg:           var(--highdmin-body-bg, #17181e);
    --c-surface:      var(--highdmin-secondary-bg, #1e1f27);
    --c-text:         var(--highdmin-body-color, #aab8c5);
    --c-muted:        var(--highdmin-secondary-color, #8b95a5);
    --c-border:       var(--highdmin-border-color, #37394d);

    /* Camadas translúcidas — dão profundidade sem cor fixa */
    --c-layer-1:      rgba(var(--c-primary-rgb), .04);
    --c-layer-2:      rgba(var(--c-primary-rgb), .07);
    --c-layer-3:      rgba(var(--c-primary-rgb), .12);
    --c-layer-4:      rgba(var(--c-primary-rgb), .18);

    /* Espaçamento — escala de 4px */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
    --sp-9: 48px;  --sp-10: 64px;

    /* Tipografia */
    --fs-xs:  11px;   --fs-sm:  12.5px;  --fs-base: 14px;
    --fs-md:  15.5px; --fs-lg:  18px;    --fs-xl:   23px;
    --fs-2xl: 30px;   --fs-3xl: 40px;
    --fw-normal: 400; --fw-medium: 500;
    --fw-semi:   600; --fw-bold:   700;  --fw-black: 800;
    --lh-tight: 1.2;  --lh-base: 1.5;    --lh-loose: 1.7;
    --track-wide: .08em;

    /* Raio */
    --r-sm: 7px;   --r-md: 10px;  --r-lg: 13px;
    --r-xl: 18px;  --r-full: 999px;

    /* Sombra */
    --sh-sm: 0 2px 8px rgba(0,0,0,.16);
    --sh-md: 0 8px 24px rgba(0,0,0,.24);
    --sh-lg: 0 22px 60px rgba(0,0,0,.34);
    --sh-glow: 0 0 34px rgba(var(--c-primary-rgb), .45);

    /* Transição */
    --t-fast: .12s ease;
    --t-base: .2s ease;
}


/* ═══ 02. RESET E BASE ═════════════════════════════════════════ */
.mp *,
.mp *::before,
.mp *::after { box-sizing: border-box; }

.mp {
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* Barra de rolagem discreta, no tom do tema */
.mp-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.mp-scroll::-webkit-scrollbar-track { background: transparent; }
.mp-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--r-full);
}
.mp-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }


/* ═══ 03. UTILITÁRIOS ══════════════════════════════════════════ */
.mp-stack   { display: flex; flex-direction: column; }
.mp-row     { display: flex; align-items: center; }
.mp-between { display: flex; align-items: center; justify-content: space-between; }
.mp-center  { display: flex; align-items: center; justify-content: center; }
.mp-wrap    { flex-wrap: wrap; }
.mp-fill    { flex: 1; min-width: 0; }

.mp-gap-1 { gap: var(--sp-1); }  .mp-gap-2 { gap: var(--sp-2); }
.mp-gap-3 { gap: var(--sp-3); }  .mp-gap-4 { gap: var(--sp-4); }
.mp-gap-5 { gap: var(--sp-5); }  .mp-gap-6 { gap: var(--sp-6); }

.mp-mt-1 { margin-top: var(--sp-1); }  .mp-mt-2 { margin-top: var(--sp-2); }
.mp-mt-3 { margin-top: var(--sp-3); }  .mp-mt-4 { margin-top: var(--sp-4); }
.mp-mt-5 { margin-top: var(--sp-5); }  .mp-mt-6 { margin-top: var(--sp-6); }
.mp-mb-1 { margin-bottom: var(--sp-1); } .mp-mb-2 { margin-bottom: var(--sp-2); }
.mp-mb-3 { margin-bottom: var(--sp-3); } .mp-mb-4 { margin-bottom: var(--sp-4); }
.mp-mb-5 { margin-bottom: var(--sp-5); } .mp-mb-6 { margin-bottom: var(--sp-6); }
.mp-mb-0 { margin-bottom: 0; }

.mp-hide { display: none !important; }
.mp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-nowrap { white-space: nowrap; }

/* Esconde visualmente mas mantém para leitores de tela */
.mp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ═══ 04. TIPOGRAFIA ═══════════════════════════════════════════ */
.mp-title    { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.mp-subtitle { font-size: var(--fs-lg); font-weight: var(--fw-bold);  line-height: var(--lh-tight); }
.mp-text     { font-size: var(--fs-base); }
.mp-small    { font-size: var(--fs-sm); }
.mp-tiny     { font-size: var(--fs-xs); }
.mp-muted    { color: var(--c-muted); }
.mp-strong   { font-weight: var(--fw-bold); }

/* Rótulo pequeno em caixa alta, usado acima de blocos */
.mp-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.mp-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: var(--c-primary);
}

/* Régua que separa o cabeçalho do conteúdo */
.mp-rule {
    height: 2px; width: 100%;
    margin: var(--sp-4) 0 var(--sp-6);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-primary), transparent);
}

.mp-c-primary { color: var(--c-primary); }
.mp-c-success { color: var(--c-success); }
.mp-c-danger  { color: var(--c-danger); }
.mp-c-warning { color: var(--c-warning); }


/* ═══ 05. BOTÕES ═══════════════════════════════════════════════ */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 11px 20px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--t-fast), background var(--t-fast),
                border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
}
.mp-btn:active { transform: translateY(1px); }
.mp-btn:disabled,
.mp-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Preenchido — o texto usa a cor do fundo da página para contrastar */
.mp-btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
    font-weight: var(--fw-bold);
}
.mp-btn-primary:hover { filter: brightness(1.08); color: var(--c-bg); }

.mp-btn-danger  { background: var(--c-danger);  border-color: var(--c-danger);  color: #fff; }
.mp-btn-danger:hover { filter: brightness(1.08); color: #fff; }
.mp-btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.mp-btn-success:hover { filter: brightness(1.08); color: #fff; }

/* Contornado — ação secundária */
.mp-btn-ghost {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text);
}
.mp-btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-btn-ghost.is-danger:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* Suave — fundo translúcido na cor primária */
.mp-btn-soft {
    background: var(--c-layer-3);
    border-color: transparent;
    color: var(--c-primary);
}
.mp-btn-soft:hover { background: var(--c-layer-4); color: var(--c-primary); }

/* Tamanhos */
.mp-btn-sm  { padding: 7px 13px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.mp-btn-lg  { padding: 14px 26px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.mp-btn-block { width: 100%; }

/* Só ícone, quadrado */
.mp-btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.mp-btn-icon:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-btn-icon.is-danger:hover { border-color: var(--c-danger); color: var(--c-danger); }


/* ═══ 06. FORMULÁRIOS ══════════════════════════════════════════ */
.mp-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    margin-bottom: 7px;
}
.mp-label-upper {
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.mp-input,
.mp-select,
.mp-textarea {
    width: 100%;
    background: var(--c-layer-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 12px 15px;
    color: var(--c-text);
    font-size: var(--fs-base);
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mp-input::placeholder,
.mp-textarea::placeholder { color: var(--c-muted); opacity: .75; }

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .13);
}
.mp-input:disabled,
.mp-textarea:disabled { opacity: .55; cursor: not-allowed; }

.mp-textarea { min-height: 110px; resize: vertical; line-height: var(--lh-base); }

/* Select: a seta nativa some (vinha branca em vários navegadores)
   e desenhamos a nossa em SVG embutido. */
.mp-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
/* A lista aberta é desenhada pelo sistema operacional: sem estas
   duas regras ela aparece com fundo branco no tema escuro. */
.mp-select option { background-color: #1c1f26; color: #e6e9ef; }
.mp-select option:checked { background-color: var(--c-primary); color: #fff; }

/* Campo com ícone à esquerda */
.mp-field { position: relative; }
.mp-field .mp-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--c-muted);
    pointer-events: none;
    z-index: 2;
}
.mp-field .mp-input { padding-left: 42px; }

/* Botão dentro do campo (olho da senha) */
.mp-field-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 8px 10px;
    font-size: 17px;
    color: var(--c-muted);
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}
.mp-field-btn:hover { color: var(--c-primary); }

.mp-help {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: 5px;
}

/* Caixa de seleção */
.mp-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-muted);
    cursor: pointer;
    user-select: none;
}
.mp-check input {
    width: 16px; height: 16px;
    accent-color: var(--c-primary);
    cursor: pointer;
    margin: 0;
}

/* Caixa de seleção desenhada (para listas customizadas) */
.mp-box-check {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--c-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.mp-box-check.is-on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}


/* ═══ 07. CARTÕES E SUPERFÍCIES ════════════════════════════════ */
.mp-card {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.mp-card-flush { padding: 0; overflow: hidden; }
.mp-card-raised { box-shadow: var(--sh-lg); border-radius: var(--r-xl); }

/* Cartão de número/indicador */
.mp-stat {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.mp-stat-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: var(--c-layer-3);
    color: var(--c-primary);
}
.mp-stat-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 3px;
}
.mp-stat-value {
    font-size: 26px;
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
}

/* Ícone quadrado, em variantes de cor */
.mp-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--c-layer-3);
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-icon-box.is-success { background: rgba(10,207,151,.14);  color: var(--c-success); }
.mp-icon-box.is-danger  { background: rgba(241,85,108,.14);  color: var(--c-danger); }
.mp-icon-box.is-warning { background: rgba(245,158,11,.14);  color: var(--c-warning); }
.mp-icon-box.is-info    { background: rgba(59,130,246,.14);  color: var(--c-info); }

/* Aviso/caixa informativa */
.mp-note {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
}
.mp-note-title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: 2px;
}
.mp-note-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--c-layer-3);
    color: var(--c-primary);
}

/* Estado vazio */
.mp-empty {
    text-align: center;
    padding: var(--sp-9) var(--sp-5);
}
.mp-empty-icon {
    font-size: 44px;
    opacity: .32;
    display: block;
    margin-bottom: var(--sp-3);
}


/* ═══ 08. TABELAS ══════════════════════════════════════════════ */
.mp-table-wrap {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--c-muted);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--c-border);
}
.mp-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-base);
    vertical-align: middle;
}
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover { background: var(--c-layer-1); }
.mp-table .mp-td-right { text-align: right; }

/* Avatar circular com inicial */
.mp-avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    text-transform: uppercase;
    background: var(--c-layer-3);
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-avatar-lg { width: 78px; height: 78px; font-size: var(--fs-xl); }


/* ═══ 09. BADGES ═══════════════════════════════════════════════ */
.mp-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    background: var(--c-layer-4);
    color: var(--c-primary);
    white-space: nowrap;
}
.mp-badge.is-success { background: rgba(10,207,151,.16); color: var(--c-success); }
.mp-badge.is-danger  { background: rgba(241,85,108,.16); color: var(--c-danger); }
.mp-badge.is-warning { background: rgba(245,158,11,.16); color: var(--c-warning); }
.mp-badge.is-info    { background: rgba(59,130,246,.16); color: var(--c-info); }
.mp-badge.is-muted   { background: var(--c-layer-2);     color: var(--c-muted); }

/* Contador redondo */
.mp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--c-primary);
    color: var(--c-bg);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
}

/* Selo com contorno */
.mp-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid rgba(var(--c-primary-rgb), .35);
    background: rgba(var(--c-primary-rgb), .09);
    color: var(--c-primary);
    border-radius: var(--r-full);
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* ═══ 10. PAGINAÇÃO ════════════════════════════════════════════ */
.mp-pag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.mp-pag-info { font-size: var(--fs-sm); color: var(--c-muted); }
.mp-pag-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-pag-btn {
    min-width: 36px; height: 36px;
    padding: 0 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-layer-1);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.mp-pag-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-pag-btn.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
}


/* ═══ 11. ABAS ═════════════════════════════════════════════════ */
/* Abas em pílula, dentro de uma caixa */
.mp-tabs {
    display: flex;
    gap: 6px;
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
.mp-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    border-radius: var(--r-md);
    padding: 9px 18px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    cursor: pointer;
    text-decoration: none;
    color: var(--c-text);
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-tab:hover { color: var(--c-primary); }
/* O seletor repetido com <a> é necessário porque o CSS do template
   força a cor dos links e sobrescreveria a regra da aba ativa. */
a.mp-tab.is-active,
a.mp-tab.is-active:hover,
a.mp-tab.is-active:focus,
.mp-tab.is-active {
    background: var(--c-primary);
    color: var(--c-bg);
}
.mp-tab.is-active i { color: var(--c-bg); }

/* Abas em barra segmentada (ocupam a largura toda) */
.mp-segment {
    display: flex;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mp-segment-item {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 13px 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-segment-item + .mp-segment-item { border-left: 1px solid var(--c-border); }
.mp-segment-item:hover { background: var(--c-layer-2); }
.mp-segment-item.is-active { background: var(--c-layer-3); color: var(--c-primary); }


/* ═══ 12. SLOT DE MÍDIA ════════════════════════════════════════ */
.mp-media {
    position: relative;
    width: 96px; height: 96px;
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-layer-1);
    color: var(--c-muted);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--fs-xs);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.mp-media:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-media i { font-size: 22px; }
.mp-media.has-thumb { border-style: solid; padding: 0; }
.mp-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }

/* Ícone de play sobre a miniatura de vídeo */
.mp-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    background: rgba(0,0,0,.32);
    pointer-events: none;
}
/* Botão de remover, no canto superior direito */
.mp-media-rm {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    border-radius: var(--r-full);
    background: rgba(241,85,108,.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}
.mp-media-rm:hover { background: var(--c-danger); }


/* ═══ 13. MODAL ════════════════════════════════════════════════ */
.mp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}
.mp-overlay.is-open { display: flex; }
.mp-modal {
    width: 100%;
    max-width: 560px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.mp-modal-head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.mp-modal-body { padding: var(--sp-5); }
.mp-modal-foot {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--c-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}
.mp-modal-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}
.mp-modal-x:hover { opacity: 1; }


/* ═══ 14. TELA DE ENTRADA (login) ══════════════════════════════
   Estrutura: painel de apresentação à esquerda, divisória neon
   vertical no meio, formulário à direita. O fundo tem linhas
   verticais com um pulso de luz percorrendo cada uma.
   ═════════════════════════════════════════════════════════════ */
.mp-auth {
    min-height: 100vh;
    display: flex;
    background: var(--c-ink-950);
    position: relative;
    overflow: hidden;
}

/* ── Fundo animado: linhas verticais com pulso ── */
.mp-auth-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Brilho difuso atrás de tudo */
.mp-auth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 28% 42%, rgba(var(--c-primary-rgb), .13) 0%, transparent 62%),
        radial-gradient(ellipse 50% 45% at 78% 78%, rgba(var(--c-primary-rgb), .07) 0%, transparent 60%);
}
/* Trilhos verticais fixos, bem sutis */
.mp-auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 78px 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* Cada risco é um elemento; o pulso desce em loop */
.mp-auth-beam {
    position: absolute;
    top: -35%;
    width: 1px;
    height: 35%;
    background: linear-gradient(180deg,
        transparent,
        rgba(var(--c-primary-rgb), .75) 45%,
        rgba(var(--c-primary-rgb), 1) 68%,
        rgba(var(--c-primary-rgb), .75) 82%,
        transparent);
    box-shadow: 0 0 12px 1px rgba(var(--c-primary-rgb), .55);
    animation: mp-beam 7s linear infinite;
    opacity: 0;
    will-change: transform;
}
@keyframes mp-beam {
    0%   { transform: translateY(0);     opacity: 0; }
    8%   { opacity: .9; }
    82%  { opacity: .9; }
    100% { transform: translateY(390vh); opacity: 0; }
}
/* Posições, atrasos e durações diferentes: o movimento não fica sincronizado */
.mp-auth-beam:nth-child(1) { left: 9%;  animation-duration: 6.5s;  animation-delay: 0s; }
.mp-auth-beam:nth-child(2) { left: 21%; animation-duration: 9s;    animation-delay: 2.4s; }
.mp-auth-beam:nth-child(3) { left: 33%; animation-duration: 7.4s;  animation-delay: 1.1s; }
.mp-auth-beam:nth-child(4) { left: 46%; animation-duration: 10.5s; animation-delay: 3.7s; }
.mp-auth-beam:nth-child(5) { left: 58%; animation-duration: 8s;    animation-delay: .6s; }
.mp-auth-beam:nth-child(6) { left: 70%; animation-duration: 11s;   animation-delay: 4.6s; }
.mp-auth-beam:nth-child(7) { left: 83%; animation-duration: 7s;    animation-delay: 1.9s; }
.mp-auth-beam:nth-child(8) { left: 93%; animation-duration: 9.6s;  animation-delay: 3.1s; }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .mp-auth-beam { animation: none; opacity: .18; top: 0; height: 100%; }
}

/* ── Lado esquerdo: apresentação ── */
.mp-auth-side {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-9) 60px;
    min-width: 0;
}
.mp-auth-side-in { width: 100%; max-width: 660px; }

.mp-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    text-decoration: none;
}
.mp-auth-logo img { height: 34px; }
.mp-auth-logo-mark {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .12);
    border: 1px solid rgba(var(--c-primary-rgb), .3);
    box-shadow: 0 0 22px rgba(var(--c-primary-rgb), .22);
}
.mp-auth-logo-text {
    font-size: 25px;
    font-weight: var(--fw-black);
    letter-spacing: .04em;
    color: #fff;
}

.mp-auth-title {
    font-size: clamp(32px, 3.9vw, 54px);
    font-weight: var(--fw-black);
    line-height: 1.03;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 var(--sp-5);
}
.mp-auth-title .hl {
    color: var(--c-primary);
    text-shadow: 0 0 38px rgba(var(--c-primary-rgb), .55);
}
.mp-auth-lead {
    font-size: var(--fs-md);
    line-height: 1.62;
    max-width: 560px;
    color: var(--c-ink-300);
    margin: 0 0 var(--sp-7);
}
.mp-auth-lead b { color: var(--c-primary); font-weight: var(--fw-semi); }

/* Cinco informativos numa linha só — sem quebrar */
.mp-auth-feats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    max-width: 660px;
}
.mp-auth-feat {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-md);
    padding: 11px 10px;
    min-width: 0;
    transition: border-color var(--t-base), background var(--t-base);
}
.mp-auth-feat:hover {
    border-color: rgba(var(--c-primary-rgb), .4);
    background: rgba(var(--c-primary-rgb), .05);
}
.mp-auth-feat > i {
    font-size: 17px;
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-auth-feat-txt { min-width: 0; }
.mp-auth-feat .t {
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-auth-feat .s {
    font-size: 10px;
    color: var(--c-ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloco de destaque com lista */
.mp-auth-box {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    max-width: 660px;
    margin-bottom: var(--sp-6);
}
.mp-auth-box-icon {
    width: 62px; height: 62px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .26);
}
.mp-auth-box h5 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: #fff;
    margin: 0 0 var(--sp-3);
}
.mp-auth-list { list-style: none; padding: 0; margin: 0; }
.mp-auth-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-sm);
    color: var(--c-ink-300);
    margin-bottom: 6px;
}
.mp-auth-list li:last-child { margin-bottom: 0; }
.mp-auth-list i { color: var(--c-primary); font-size: 15px; flex-shrink: 0; }

/* Prova social */
.mp-auth-proof {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    max-width: 660px;
    flex-wrap: wrap;
}
.mp-auth-dots { display: flex; }
.mp-auth-dots span {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    border: 2px solid var(--c-ink-900);
    margin-right: -10px;
    background: var(--c-ink-600);
}
.mp-auth-dots span:nth-child(1) { background: linear-gradient(135deg,#e8c07d,#c99a4e); }
.mp-auth-dots span:nth-child(2) { background: linear-gradient(135deg,#7dd8a0,#4aa872); }
.mp-auth-dots span:nth-child(3) { background: linear-gradient(135deg,#7dc5e8,#4a90b8); }
.mp-auth-dots span:nth-child(4) { background: linear-gradient(135deg,#a89ae8,#7566c4); }
.mp-auth-dots span:nth-child(5) { background: linear-gradient(135deg,#e89ab8,#c46689); margin-right: 0; }
.mp-auth-proof-sep { width: 1px; height: 34px; background: var(--c-ink-700); }
.mp-auth-stars { color: #f5b544; font-size: 14px; letter-spacing: 1px; }

/* ── Divisória neon vertical ── */
.mp-auth-divider {
    position: relative;
    z-index: 2;
    width: 1px;
    flex-shrink: 0;
    align-self: stretch;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--c-primary-rgb), .28) 12%,
        rgba(var(--c-primary-rgb), .95) 50%,
        rgba(var(--c-primary-rgb), .28) 88%,
        transparent 100%);
    box-shadow:
        0 0 16px 1px rgba(var(--c-primary-rgb), .5),
        0 0 42px 4px rgba(var(--c-primary-rgb), .22);
}
/* Ponto de luz que sobe e desce sobre a divisória */
.mp-auth-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 90px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, transparent, var(--c-primary), transparent);
    filter: blur(1px);
    animation: mp-divider-run 5.5s ease-in-out infinite;
}
@keyframes mp-divider-run {
    0%, 100% { top: 6%;  opacity: .25; }
    50%      { top: 82%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-auth-divider::after { animation: none; top: 45%; opacity: .6; }
}

/* ── Lado direito: formulário ── */
.mp-auth-main {
    flex: 0 0 560px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-7);
    background: rgba(0,0,0,.28);
}
.mp-auth-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
}
.mp-auth-card {
    width: 100%;
    background: var(--c-ink-850);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-7);
    box-shadow: var(--sh-lg);
}
.mp-auth-avatar {
    width: 84px; height: 84px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-ink-950);
    border: 1px solid rgba(var(--c-primary-rgb), .32);
    box-shadow: 0 0 30px rgba(var(--c-primary-rgb), .18);
}
.mp-auth-avatar img { height: 42px; }
.mp-auth-avatar i { font-size: 38px; color: var(--c-primary); }

.mp-auth-heading {
    text-align: center;
    font-size: 26px;
    font-weight: var(--fw-black);
    color: #fff;
    margin: 0 0 7px;
}
.mp-auth-sub {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-ink-400);
    margin: 0 0 var(--sp-6);
}

/* Campos do formulário de entrada */
.mp-auth-card .mp-label { color: var(--c-ink-200); }
.mp-auth-card .mp-field { margin-bottom: 18px; }
.mp-auth-card .mp-input {
    background: var(--c-ink-900);
    border-color: var(--c-ink-700);
    color: #fff;
    padding-top: 14px;
    padding-bottom: 14px;
}
.mp-auth-card .mp-input::placeholder { color: var(--c-ink-500); }
.mp-auth-card .mp-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .14);
}

.mp-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.mp-auth-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-primary);
    text-decoration: none;
}
.mp-auth-link:hover { text-decoration: underline; }

/* Botão principal, com brilho */
.mp-auth-submit {
    width: 100%;
    border: 0;
    border-radius: var(--r-md);
    padding: 15px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    color: #05130a;
    background: linear-gradient(180deg,
        var(--c-primary),
        rgba(var(--c-primary-rgb), .82));
    box-shadow: 0 6px 22px rgba(var(--c-primary-rgb), .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.mp-auth-submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 28px rgba(var(--c-primary-rgb), .38);
}
.mp-auth-submit:active { transform: translateY(1px); }

.mp-auth-foot {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-ink-400);
    margin: var(--sp-5) 0 0;
}
.mp-auth-foot a { color: var(--c-primary); font-weight: var(--fw-bold); text-decoration: none; }
.mp-auth-foot a:hover { text-decoration: underline; }

.mp-auth-legal {
    text-align: center;
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    color: var(--c-ink-500);
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-ink-700);
}
.mp-auth-legal a { color: var(--c-ink-400); text-decoration: underline; }
.mp-auth-legal a:hover { color: var(--c-primary); }

/* Caixa abaixo do cartão de entrada */
.mp-auth-note {
    width: 100%;
    margin-top: var(--sp-4);
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    background: var(--c-ink-850);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
}
.mp-auth-note-icon {
    width: 54px; height: 54px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .24);
}
.mp-auth-note-title {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    color: var(--c-primary);
    line-height: var(--lh-tight);
    margin-bottom: 3px;
}
.mp-auth-note-text { font-size: var(--fs-sm); color: var(--c-ink-400); line-height: 1.45; }

/* ═══ 15. RESPONSIVO ═══════════════════════════════════════════ */
@media (max-width: 1399px) {
    .mp-auth-side { padding: var(--sp-8) 44px; }
    .mp-auth-main { flex: 0 0 480px; }
}

@media (max-width: 1199px) {
    .mp-auth-side  { padding: var(--sp-7) 32px; }
    .mp-auth-main  { flex: 0 0 420px; padding: var(--sp-7) var(--sp-5); }
    /* 5 em linha ficaria apertado: passa para 3 + 2 */
    .mp-auth-feats { grid-template-columns: repeat(3, 1fr); }
    .mp-auth-title { font-size: 38px; }
}

@media (max-width: 991px) {
    .mp-auth          { flex-direction: column; }
    .mp-auth-side     { flex: none; padding: 40px 24px 16px; text-align: center; }
    .mp-auth-side-in  { margin: 0 auto; }
    .mp-auth-logo     { justify-content: center; }
    .mp-auth-lead,
    .mp-auth-box,
    .mp-auth-proof,
    .mp-auth-feats    { margin-left: auto; margin-right: auto; }
    .mp-auth-box,
    .mp-auth-proof    { text-align: left; justify-content: center; }
    /* A divisória vira horizontal entre as duas partes */
    .mp-auth-divider  {
        width: 100%;
        height: 1px;
        align-self: auto;
        margin: var(--sp-6) 0 0;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--c-primary-rgb), .28) 12%,
            rgba(var(--c-primary-rgb), .95) 50%,
            rgba(var(--c-primary-rgb), .28) 88%,
            transparent 100%);
    }
    .mp-auth-divider::after {
        left: auto; top: 50%;
        transform: translateY(-50%);
        width: 90px; height: 3px;
        background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
        animation: mp-divider-run-h 5.5s ease-in-out infinite;
    }
    @keyframes mp-divider-run-h {
        0%, 100% { left: 4%;  opacity: .25; }
        50%      { left: 84%; opacity: 1; }
    }
    .mp-auth-main { flex: none; width: 100%; padding: var(--sp-6) 22px 46px; background: transparent; }
    .mp-hide-md   { display: none !important; }
}

@media (max-width: 767px) {
    .mp-auth-feats { grid-template-columns: repeat(2, 1fr); }
    .mp-hide-sm    { display: none !important; }
}

@media (max-width: 575px) {
    .mp-auth-side   { padding: 30px 18px 8px; }
    .mp-auth-card   { padding: var(--sp-6) var(--sp-5); }
    .mp-auth-title  { font-size: 30px; }
    .mp-auth-box    { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
    .mp-auth-proof  { justify-content: center; }
    .mp-auth-proof-sep { display: none; }
    .mp-hide-xs     { display: none !important; }
}