{{--
    Etapa Visual 1 — Operador (padrão visual homologado do PHP puro de Feira Grande).

    Incluído SOMENTE pelas telas operacionais (painel-operador, quorum-votacao,
    central-sessao), dentro do elemento raiz de cada componente, que recebe a
    classe .lg-op. TODAS as regras abaixo começam por .lg-op — nada aqui alcança
    cadastros, relatórios ou qualquer outra tela que use admin-layout.blade.php
    (o .btn/.card/.badge globais daquele layout continuam intactos).

    Só apresentação: nenhuma regra muda o que é exibido, esconde/mostra ação ou
    interfere em wire:*, x-*, eventos ou condicionais. As cores de cada botão
    continuam vindo das variáveis --btn-bg/--btn-fg/--btn-bd que o .btn do
    admin-layout já usa; as sombras coloridas derivam dessas mesmas variáveis.

    Valores de referência (PHP homologado): admin_materia_nova.php (botões,
    cards, badges, modais, pauta) e admin_configuracoes.php (plenário).
--}}
<style>
    /* ===================== Botões ===================== */
    .lg-op .btn {
        position: relative;
        overflow: hidden;
        padding: .55rem .9rem;
        font-size: .9rem;
        font-weight: 700;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
        transition: all .25s cubic-bezier(.4, 0, .2, 1);
    }

    /* faixa de brilho que atravessa o botão no hover */
    .lg-op .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
        transition: left .5s ease;
        pointer-events: none;
    }

    .lg-op .btn:hover::before { left: 100%; }

    .lg-op .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    }

    .lg-op .btn:active { transform: translateY(0); }

    .lg-op .btn.small {
        padding: .45rem .7rem;
        font-size: .85rem;
        border-radius: 10px;
    }

    /* Variantes sólidas — sombra tingida na própria cor do botão */
    .lg-op .btn.primary,
    .lg-op .btn.success,
    .lg-op .btn.danger,
    .lg-op .btn.warning {
        box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--btn-bg) 20%, transparent);
    }

    .lg-op .btn.primary:hover,
    .lg-op .btn.success:hover,
    .lg-op .btn.danger:hover,
    .lg-op .btn.warning:hover {
        box-shadow: 0 12px 28px rgba(15, 23, 42, .2);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--btn-bg) 30%, transparent);
    }

    /* Variantes contornadas (antes órfãs no painel — existiam só na Central) */
    .lg-op .btn.danger-outline { --btn-bg: #fff; --btn-fg: #dc2626; --btn-bd: #dc2626; }
    .lg-op .btn.warning-outline { --btn-bg: #fff; --btn-fg: #b45309; --btn-bd: #f59e0b; }

    .lg-op .btn.outline:hover,
    .lg-op .btn.danger-outline:hover,
    .lg-op .btn.warning-outline:hover {
        --btn-bg: color-mix(in srgb, var(--btn-bd) 7%, #fff);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--btn-bd) 15%, transparent);
    }

    /* Tamanho compacto dos botões dentro dos cards de vereador (btn-xs do PHP) */
    .lg-op .btn.lg-xs {
        padding: .3rem .6rem;
        font-size: .78rem;
        font-weight: 600;
        border-radius: 8px;
        gap: 5px;
    }

    /* Desabilitado e elementos .btn não clicáveis (span de status) */
    .lg-op .btn:disabled,
    .lg-op .btn:disabled:hover {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .lg-op .btn:disabled::before,
    .lg-op span.btn::before { display: none; }

    .lg-op span.btn:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    }

    /* ===================== Cards ===================== */
    .lg-op .card,
    .lg-op .cs-card {
        border-radius: 18px;
        box-shadow: 0 4px 20px rgba(2, 6, 23, .04);
        transition: box-shadow .3s ease, transform .3s ease;
    }

    .lg-op .card:hover,
    .lg-op .cs-card:hover {
        box-shadow: 0 12px 40px rgba(2, 6, 23, .08);
    }

    /* card inteiro clicável (ex.: Inscrições) — levanta como no PHP */
    .lg-op .lg-card-clicavel:hover { transform: translateY(-2px); }

    /* ===================== Badges ===================== */
    .lg-op .badge {
        border-radius: .7rem;
        padding: .25rem .6rem;
        font-size: .78rem;
        font-weight: 700;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .lg-op .badge:hover { transform: scale(1.05); }

    .lg-op .badge.ativa {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(22, 163, 74, .15);
    }

    .lg-op .badge.encerrada {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(239, 68, 68, .15);
    }

    .lg-op .badge.preparacao {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1e40af;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(59, 130, 246, .15);
    }

    /* ===================== Cabeçalho operacional ===================== */
    .lg-op .painel-cabecalho,
    .lg-op .lg-op-topo {
        background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(248, 250, 252, .95) 100%);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 18px;
        padding: 12px 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
        transition: box-shadow .3s ease;
    }

    .lg-op .painel-cabecalho:hover,
    .lg-op .lg-op-topo:hover { box-shadow: 0 6px 25px rgba(0, 0, 0, .06); }

    .lg-op .lg-op-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .lg-op .lg-op-topo-acoes {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    /* ===================== Pauta ===================== */
    /* cabeçalho de cada fase = separador de fase do PHP (fase-separador) */
    .lg-op .lg-fase-hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: -20px -20px 10px;
        padding: 12px 20px;
        background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
        border-bottom: 2px solid #bfdbfe;
        border-radius: 18px 18px 0 0;
        color: #1e3a8a;
        font-weight: 800;
    }

    .lg-op .lg-fase-hd strong { display: inline-flex; align-items: center; gap: 8px; }

    .lg-op .lg-pauta-linha {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid #e2e6ee;
        transition: background-color .12s ease, box-shadow .12s ease, opacity .12s ease;
    }

    .lg-op .lg-pauta-info { flex: 1; min-width: 0; }

    /* matéria atual (em leitura ou em votação) — faixa azul à esquerda */
    .lg-op .lg-pauta-linha.lg-mat-atual {
        background: #eff6ff;
        box-shadow: inset 5px 0 0 #2563eb, inset 0 0 0 1px rgba(37, 99, 235, .20);
        border-radius: 10px;
    }

    /* votação em bloco em andamento */
    .lg-op .lg-pauta-linha.lg-mat-bloco {
        background: linear-gradient(90deg, #bfdbfe 0%, #dbeafe 100%);
        box-shadow: inset 6px 0 0 #1d4ed8, 0 0 0 1px rgba(37, 99, 235, .18);
        border-radius: 10px;
    }

    /* selecionada para votação em bloco */
    .lg-op .lg-pauta-linha.lg-mat-selecionada {
        background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%);
        box-shadow: inset 5px 0 0 #2563eb;
        border-radius: 10px;
    }

    /* já votada — faixa lateral com a cor do resultado */
    .lg-op .lg-pauta-linha.lg-resultado-aprovada {
        background: #f0fdf4;
        box-shadow: inset 5px 0 0 #16a34a;
    }

    .lg-op .lg-pauta-linha.lg-resultado-reprovada {
        background: #fef2f2;
        box-shadow: inset 5px 0 0 #ef4444;
    }

    /* setas de ordem (▲▼) */
    .lg-op .lg-ordem-btn {
        border: 1px solid #e2e6ee;
        background: #fff;
        border-radius: 6px;
        width: 26px;
        height: 22px;
        cursor: pointer;
        font-size: .7rem;
        color: #475569;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

    .lg-op .lg-ordem-btn:hover {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
    }

    /* ===================== Plenário — cards de vereador ===================== */
    .lg-op .lg-vgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        margin-top: 12px;
    }

    .lg-op .lg-vcard {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
        transition: all .3s ease;
    }

    .lg-op .lg-vcard:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
        border-color: #cbd5e1;
    }

    .lg-op .lg-vcard--presente {
        border-color: #86efac;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    }

    .lg-op .lg-vcard--ausente {
        border-color: #fecaca;
        background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
    }

    .lg-op .lg-vcard-topo {
        display: flex;
        align-items: center;
        gap: .85rem;
    }

    .lg-op .lg-vcard-foto {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
        flex-shrink: 0;
    }

    .lg-op .lg-vcard-foto--inicial {
        background: #e2e8f0;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.05rem;
    }

    .lg-op .lg-vcard-id { flex: 1; min-width: 0; }

    .lg-op .lg-vcard-nome-linha {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .lg-op .lg-vcard-nome { font-size: .95rem; color: #0f172a; }
    .lg-op .lg-vcard-partido { color: #64748b; font-size: .82rem; }
    .lg-op .lg-vcard-estado { font-size: .72rem; font-weight: 700; margin-top: 2px; }
    .lg-op .lg-vcard-obs { font-size: .7rem; color: #94a3b8; margin-top: 1px; }

    .lg-op .lg-vcard-acoes {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }

    .lg-op .lg-vcard-acoes .lg-vcard-just,
    .lg-op .lg-vcard-acoes .lg-vcard-voto { flex-basis: 100%; }

    .lg-op .lg-vcard-voto { display: flex; gap: 4px; }

    /* ===================== Modais ===================== */
    .lg-op .lg-modal-overlay {
        background: rgba(15, 23, 42, .5);
        backdrop-filter: blur(6px);
    }

    .lg-op .lg-modal-box {
        border-radius: 20px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, .2);
        animation: lgOpModalEntrada .3s cubic-bezier(.4, 0, .2, 1);
    }

    @keyframes lgOpModalEntrada {
        from { opacity: 0; transform: translateY(20px) scale(.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* faixa de cabeçalho do modal (as caixas têm padding de 20px) */
    .lg-op .lg-modal-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: -20px -20px 16px;
        padding: 16px 20px;
        background: linear-gradient(135deg, rgba(248, 250, 252, .8) 0%, rgba(241, 245, 249, .8) 100%);
        border-bottom: 1px solid #e5e7eb;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }

    .lg-op .lg-modal-head .fechar {
        margin-left: auto;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #94a3b8;
        cursor: pointer;
        transition: transform .2s ease, color .2s ease, background-color .2s ease;
    }

    .lg-op .lg-modal-head .fechar:hover {
        transform: rotate(90deg);
        color: #ef4444;
        background: rgba(239, 68, 68, .1);
    }

    /* (antes órfãs no painel — mesmas regras da Central) */
    .lg-op .lg-modal-aviso { background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin-bottom: 14px; line-height: 1.5; }
    .lg-op .lg-erro { color: #dc2626; font-size: .82rem; font-weight: 600; margin-top: -8px; margin-bottom: 10px; }

    /* ===================== Responsividade ===================== */
    @media (max-width: 820px) {
        .lg-op .btn { padding: .5rem .7rem; font-size: .85rem; }
        .lg-op .btn.lg-xs { padding: .35rem .6rem; font-size: .78rem; }

        .lg-op .painel-cabecalho,
        .lg-op .lg-op-topo { padding: 10px 12px; }

        /* pauta: cada matéria vira um card empilhado (padrão mobile do PHP) */
        .lg-op .lg-pauta-linha {
            flex-wrap: wrap;
            padding: 14px;
            margin-bottom: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
        }

        .lg-op .lg-pauta-info { flex: 1 1 calc(100% - 80px); }
        .lg-op .lg-pauta-linha select { flex: 1 1 100%; }

        .lg-op .lg-pauta-linha .btn {
            flex: 1 1 auto;
            justify-content: center;
            min-height: 40px;
        }

        .lg-op .lg-ordem-btn { width: 34px; height: 30px; font-size: .8rem; }
    }

    @media (max-width: 768px) {
        .lg-op .lg-vcard-topo { flex-direction: column; text-align: center; }
        .lg-op .lg-vcard-foto { width: 64px; height: 64px; }
        .lg-op .lg-vcard-id { width: 100%; }
        .lg-op .lg-vcard-nome-linha { justify-content: center; flex-wrap: wrap; }
        .lg-op .lg-vcard-acoes { justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
        .lg-op *,
        .lg-op *::before {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }

        .lg-op .btn:hover,
        .lg-op .card:hover,
        .lg-op .lg-vcard:hover,
        .lg-op .badge:hover { transform: none; }
    }
</style>