/* ============================================================
   LIRITUS PLATAFORMA — Design System
   ============================================================ */

/* --- Fontes --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Variáveis --- */
:root {
    /* Cores da marca */
    --brand-primary:      #9B5E1A;
    --brand-dark:         #6B3E10;
    --brand-light:        #C47A2A;
    --brand-pale:         #F5ECD9;
    --brand-gradient:     linear-gradient(135deg, #C47A2A 0%, #9B5E1A 100%);

    /* Neutros */
    --white:              #FFFFFF;
    --gray-50:            #FAFAFA;
    --gray-100:           #F4F4F5;
    --gray-200:           #E4E4E7;
    --gray-300:           #D1D5DB;
    --gray-400:           #9CA3AF;
    --gray-500:           #6B7280;
    --gray-600:           #4B5563;
    --gray-700:           #374151;
    --gray-800:           #1F2937;
    --gray-900:           #111827;

    /* Semânticas */
    --success:            #16A34A;
    --success-bg:         #F0FDF4;
    --error:              #DC2626;
    --error-bg:           #FEF2F2;
    --warning:            #D97706;
    --warning-bg:         #FFFBEB;
    --info:               #2563EB;
    --info-bg:            #EFF6FF;

    /* Layout */
    --sidebar-width:      260px;
    --header-height:      64px;
    --radius-sm:          8px;
    --radius-md:          12px;
    --radius-lg:          16px;
    --radius-xl:          24px;
    --radius-full:        9999px;

    /* Sombras */
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:          0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:          0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-brand:       0 8px 24px rgba(155,94,26,0.25);

    /* Transições */
    --transition:         all 0.2s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #EAEAEA;
    color: var(--gray-800);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--brand-dark); }

img { max-width: 100%; display: block; }

/* ============================================================
   COMPONENTES GLOBAIS
   ============================================================ */

/* --- Botões --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--brand-gradient);
    color: white;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
    box-shadow: 0 12px 28px rgba(155,94,26,0.35);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--brand-primary);
    border: 1.5px solid var(--brand-light);
}
.btn-outline:hover {
    background: var(--brand-pale);
    color: var(--brand-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
    border: 1.5px solid var(--gray-200);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }

.btn-danger {
    background: var(--error-bg);
    color: var(--error);
    border: 1.5px solid #FCA5A5;
}
.btn-danger:hover { background: #FEE2E2; }

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-full { width: 100%; }

/* --- Cards --- */
.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.card-hover:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-light);
    transform: translateY(-2px);
}
.card-body { padding: 24px; }
.card-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-100); }
.card-footer { padding: 16px 24px; border-top: 1px solid var(--gray-100); background: var(--gray-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Card colapsável (<details>) — listagem padrão do projeto. Estava definida só localmente dentro
   de tab-regra-estatutaria.php; promovida pra global porque outras abas (Carteirinha, Comunicação)
   reaproveitam a mesma classe e renderizavam sem nenhum estilo fora daquela aba específica. */
.ta-card {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: 14px; margin-bottom: 12px;
    overflow: hidden; transition: box-shadow .15s;
}
.ta-card[open] { box-shadow: 0 4px 20px rgba(0,0,0,.07); border-color: var(--brand-light); }
.ta-card > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; cursor: pointer; list-style: none;
    user-select: none;
}
.ta-card > summary::-webkit-details-marker { display: none; }
.ta-card > summary:hover { background: var(--gray-50); }
.ta-chevron { margin-left: auto; color: var(--gray-400); font-size: 11px; transition: transform .2s; }
.ta-card[open] .ta-chevron { transform: rotate(180deg); }

/* --- Formulários --- */
.form-group { margin-bottom: 20px; }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    color: var(--gray-800);
    transition: var(--transition);
    outline: none;
}
.form-input:focus {
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(196,122,42,0.1);
}
.form-input::placeholder { color: var(--gray-400); }
.form-input.error { border-color: var(--error); }

.form-hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* --- Alertas --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 20px;
}
.alert-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid #FCA5A5; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #86EFAC; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #FCD34D; }
.alert-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid #93C5FD; }

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}
.badge-brand   { background: var(--brand-pale);  color: var(--brand-dark); }
.badge-success { background: var(--success-bg);  color: var(--success); }
.badge-error   { background: var(--error-bg);    color: var(--error); }
.badge-gray    { background: var(--gray-100);    color: var(--gray-600); }

/* --- Divider --- */
.divider { height: 1px; background: var(--gray-200); margin: 24px 0; }

/* --- Avatar --- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    background: var(--brand-gradient);
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* ============================================================
   LAYOUT DE AUTENTICAÇÃO (login, cadastro)
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-visual {
    background-image: url('../img/fundo_login.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
}
.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(155,94,26,0.3) 0%, rgba(30,15,0,0.75) 100%);
}
.auth-visual-content { position: relative; z-index: 1; color: white; }
.auth-visual-content h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.auth-visual-content p  { font-size: 15px; opacity: 0.85; line-height: 1.7; }

.auth-form-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 40px;
    background: var(--white);
    overflow-y: auto;
}

.auth-box { width: 100%; max-width: 400px; }

.auth-logo { margin-bottom: 36px; }
.auth-logo img { height: 44px; }

.auth-title { font-size: 26px; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--gray-500); margin-bottom: 32px; }

.auth-footer { margin-top: 24px; text-align: center; font-size: 13px; color: var(--gray-500); }
.auth-footer a { color: var(--brand-primary); font-weight: 600; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-size: 12px;
    color: var(--gray-400);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

@media (max-width: 768px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
    .auth-form-side { padding: 32px 24px; }
}

/* ============================================================
   LAYOUT DO SISTEMA (dashboard, páginas internas)
   ============================================================ */

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--white);
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    overflow: hidden;
}

.sidebar-logo {
    padding: 20px 20px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-logo img { height: 48px; }

.sidebar-nav { padding: 16px 12px; flex: 1; overflow-y: auto; }

.nav-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    padding: 0 10px;
    margin: 16px 0 6px;
}
.nav-section-title:first-child { margin-top: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 2px;
    text-decoration: none;
}
.nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
.nav-item.active {
    background: var(--brand-pale);
    color: var(--brand-dark);
    font-weight: 600;
}
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item-danger { color: var(--error) !important; }
.nav-item-danger:hover { background: var(--error-bg) !important; }
.nav-badge { background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; min-width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--gray-100);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.sidebar-user:hover { background: var(--gray-100); }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name  { font-size: 13px; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-email { font-size: 11px; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Main content --- */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.page-header-actions { margin-left: auto; display:flex; gap:8px; align-items:center; }
.page-title { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.page-subtitle { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

.page-body { padding: 32px; flex: 1; }

/* --- Stats cards --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }

.stat-card { padding: 20px 24px; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.stat-label { font-size: 13px; color: var(--gray-500); margin-bottom: 8px; }
.stat-change { font-size: 12px; font-weight: 600; }
.stat-change.up   { color: var(--success); }
.stat-change.down { color: var(--error); }
.stat-change.neutral { color: var(--gray-400); }
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}
.stat-icon.brand   { background: var(--brand-pale); }
.stat-icon.green   { background: var(--success-bg); }
.stat-icon.blue    { background: var(--info-bg); }
.stat-icon.red     { background: var(--error-bg); }

/* --- Quick access grid --- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.quick-card {
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: inherit;
}
.quick-card:hover { color: inherit; }
.quick-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--brand-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
}
.quick-card h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.quick-card p  { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

/* --- Seção títulos internos --- */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title  { font-size: 16px; font-weight: 700; color: var(--gray-900); }

/* ============================================================
   LANDING PAGE (index.php)
   ============================================================ */

.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.landing-nav img { height: 36px; }
.landing-nav-links { display: flex; align-items: center; gap: 12px; }

.landing-hero {
    min-height: 100vh;
    background-image: url('../img/fundo.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
}
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0.92) 100%);
}
.landing-hero-content { position: relative; z-index: 1; max-width: 720px; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.hero-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }

.hero-title {
    font-size: clamp(36px, 6vw, 62px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gray-900);
    margin-bottom: 20px;
}
.hero-title span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle { font-size: 18px; color: var(--gray-600); max-width: 520px; margin: 0 auto 40px; line-height: 1.7; }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.features-section {
    padding: 96px 48px;
    background: var(--white);
}
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }

.feature-card {
    padding: 32px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}
.feature-card:hover { border-color: var(--brand-light); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card-icon { width: 52px; height: 52px; margin-bottom: 20px; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--gray-900); }
.feature-card p  { font-size: 14px; color: var(--gray-500); line-height: 1.7; }

.cta-section {
    padding: 96px 48px;
    background: var(--gray-50);
    text-align: center;
}
.cta-section h2 { font-size: 36px; font-weight: 800; color: var(--gray-900); margin-bottom: 12px; }
.cta-section p  { font-size: 16px; color: var(--gray-500); margin-bottom: 36px; }

.landing-footer {
    padding: 24px 48px;
    border-top: 1px solid var(--gray-200);
    background: var(--white);
    text-align: center;
    font-size: 13px;
    color: var(--gray-400);
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 12px; }
.text-muted  { color: var(--gray-500); }
.text-brand  { color: var(--brand-primary); }
.text-success{ color: var(--success); }
.text-error  { color: var(--error); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.flex  { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.w-full { width: 100%; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REGISTRO — layout wide + form rows
   ============================================================ */

.auth-page-wide { grid-template-columns: 1fr 1.6fr; }
.auth-box-wide  { max-width: 680px; }

.form-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
}
.form-section-title:first-child { margin-top: 0; }

.form-row        { display: flex; gap: 12px; }
.form-row > .form-group { flex: 1; min-width: 0; }
.form-row-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-cep    { max-width: 200px; }
.form-row-end    { display: flex; gap: 12px; }

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .auth-page-wide      { grid-template-columns: 1fr; }
    .auth-page-wide .auth-visual { display: none; }
    .form-row, .form-row-2, .form-row-end { grid-template-columns: 1fr; flex-direction: column; }
    .form-row-cep        { max-width: 100%; }
    /* Campos com largura fixa via style inline (horário, CPF, nascimento etc. em forms montados
       fora do padrão .form-row) espremem/desalinham em telas pequenas — força largura total pra
       empilhar em vez de espremer. input[type=date/time] também ganham largura mínima 0 porque o
       navegador reserva uma largura intrínseca que estoura containers estreitos. */
    .form-group[style*="width"] { width: 100% !important; }
    input[type="date"], input[type="time"] { min-width: 0; width: 100%; }
}
.animate-fadeUp { animation: fadeUp 0.5s ease forwards; }

/* ============================================================
   MODAL SYSTEM
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.open {
    opacity: 1; visibility: visible;
}
.modal-box {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 36px 32px 28px;
    max-width: 420px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    transform: scale(0.92) translateY(16px);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    text-align: center;
}
.modal-overlay.open .modal-box {
    transform: scale(1) translateY(0);
}
.modal-icon {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 20px;
}
.modal-icon.danger  { background: #FEF2F2; }
.modal-icon.warning { background: #FFFBEB; }
.modal-icon.success { background: #F0FDF4; }
.modal-icon.info    { background: var(--brand-pale); }
.modal-title {
    font-size: 18px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 8px;
}
.modal-msg {
    font-size: 14px; color: var(--gray-500); line-height: 1.6;
    margin-bottom: 28px;
}
.modal-actions {
    display: flex; gap: 10px; justify-content: center;
}
.modal-actions .btn { min-width: 120px; }

/* ============================================================
   TELA DE SUCESSO (cadastro, etc.)
   ============================================================ */
.success-page {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center; background: var(--gray-50); padding: 24px;
}
.success-box {
    background: var(--white); border-radius: var(--radius-xl);
    padding: 48px 40px; max-width: 460px; width: 100%;
    box-shadow: var(--shadow-lg); text-align: center;
}
.success-checkmark {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(34,197,94,0.3);
    animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.success-title {
    font-size: 24px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 10px;
}
.success-msg {
    font-size: 15px; color: var(--gray-500); line-height: 1.6;
    margin-bottom: 32px;
}
.success-progress {
    height: 4px; background: var(--gray-100); border-radius: 2px;
    overflow: hidden; margin-bottom: 16px;
}
.success-progress-bar {
    height: 100%; background: var(--brand-gradient);
    border-radius: 2px; width: 0;
    transition: width linear;
}

/* ============================================================
   RESPONSIVIDADE — Sidebar & Layout
   ============================================================ */

:root { --sidebar-collapsed-width: 64px; }

/* Previne scroll horizontal no iOS */
html, body { overflow-x: hidden; max-width: 100%; }

/* --- Transições da sidebar --- */
.sidebar      { transition: width 0.25s ease, transform 0.25s ease; }
.main-content { transition: margin-left 0.25s ease; min-width: 0; }

/* --- Botão hamburger / toggle --- */
#sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
#sidebar-toggle:hover { background: var(--gray-100); }
#sidebar-toggle .bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--gray-600);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}
#sidebar-toggle.is-open .bar1 { transform: translateY(7px) rotate(45deg); }
#sidebar-toggle.is-open .bar2 { opacity: 0; transform: scaleX(0); }
#sidebar-toggle.is-open .bar3 { transform: translateY(-7px) rotate(-45deg); }

/* --- Overlay mobile --- */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 150;
}
#sidebar-overlay.active { display: block; }

/* --- Desktop: sidebar colapsada --- */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); overflow: hidden; }
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar-logo { padding: 20px 0; }
body.sidebar-collapsed .sidebar-logo img { height: 36px; content: url('/assets/img/liritus2Logo.png'); }
body.sidebar-collapsed .nav-section-title { display: none; }
body.sidebar-collapsed .sidebar-nav { padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .nav-item { justify-content: center !important; padding: 10px 0 !important; width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .nav-item .nav-label { display: none; }
body.sidebar-collapsed .nav-badge { display: none; }
body.sidebar-collapsed .sidebar-user { justify-content: center; padding: 8px; }
body.sidebar-collapsed .sidebar-user-info { display: none; }

/* --- Tabelas responsivas --- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .page-body   { padding: 24px; }
    .page-header { padding: 16px 24px; }
}

/* Header que só aparece no mobile (para páginas sem header desktop) */
.page-header-mobile-only { display: none; }

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .page-header-mobile-only { display: flex; }

    /* Sidebar vira drawer lateral */
    .sidebar {
        transform: translateX(-100%);
        z-index: 200;
        width: var(--sidebar-width) !important;
        /* iOS: permite scroll interno na sidebar */
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main-content { margin-left: 0 !important; width: 100%; }

    /* Header */
    .page-header {
        padding: 12px 16px;
        gap: 10px;
        /* iOS: evita que o header suma atrás da notch */
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .page-title   { font-size: 17px; }
    .page-subtitle { display: none; }

    /* Body */
    .page-body {
        padding: 16px;
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Grids CSS (classes) */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
    .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Grids inline (inline style override via !important) */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Exceção: grids de 2 colunas iguais podem ficar */
    [style*="repeat(2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Flex rows que devem empilhar */
    [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap;
    }

    /* Formulários */
    .form-row     { flex-direction: column; }
    .form-row-2   { grid-template-columns: 1fr; }
    .form-row-end { flex-direction: column; }
    .form-row-cep { max-width: 100%; }

    /* Auth */
    .auth-page      { grid-template-columns: 1fr; }
    .auth-visual    { display: none; }
    .auth-form-side { padding: 28px 20px; }
    .auth-page-wide { grid-template-columns: 1fr; }

    /* Modal */
    .modal-actions { flex-direction: column; }
    .modal-actions .btn { width: 100%; min-width: unset; }
    .modal-box { padding: 28px 20px 22px; }

    /* Landing */
    .landing-nav { padding: 12px 20px; }
    .landing-nav-links .btn-outline { display: none; }
    .features-section, .cta-section { padding: 56px 20px; }
    .landing-footer { padding: 16px 20px; }

    /* Imagens e conteúdo não transbordam */
    img, video, iframe { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }

    /* Tabela — transforma em cards no mobile */
    .table-responsive { margin: 0; overflow-x: unset; }
    table { min-width: unset; }

    table.data-table thead { display: none; }

    table.data-table tbody tr {
        display: block;
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
        overflow: hidden;
    }
    table.data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: none !important;
        border-bottom: 1px solid var(--gray-50) !important;
        font-size: 13px;
        text-align: right;
    }
    table.data-table tbody td:last-child { border-bottom: none !important; }
    table.data-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--gray-500);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
        text-align: left;
    }
    table.data-table tbody td[data-label=""]::before,
    table.data-table tbody td:not([data-label])::before { display: none; }
    table.data-table tbody td[data-label=""] { justify-content: flex-end; }

    /* Célula de usuário: empilha no mobile */
    .user-cell { flex-direction: row; }
}

/* Smartphone pequeno (≤480px) */
@media (max-width: 480px) {
    .stats-grid { gap: 8px; }
    .stat-card  { padding: 14px 16px; }
    .stat-value { font-size: 22px; }
    .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .quick-card { padding: 14px; }
    .page-body  { padding: 12px; }
    .page-header { padding: 10px 12px; }

    /* Grids de 3 colunas repetem vira 1 coluna em telas muito pequenas */
    [style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Lightbox ───────────────────────────────────────────────────────── */
#lb-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
    cursor: zoom-out;
}
#lb-overlay.lb-open { opacity: 1; }

#lb-img {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    transform: scale(.92); transition: transform .28s cubic-bezier(.34,1.3,.64,1);
    object-fit: contain; cursor: default;
}
#lb-overlay.lb-open #lb-img { transform: scale(1); }

#lb-close {
    position: fixed; top: 18px; right: 22px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: none;
    color: #fff; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; z-index: 99999;
}
#lb-close:hover { background: rgba(255,255,255,.28); }

#lb-caption {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 13px; font-weight: 600; padding: 6px 18px;
    border-radius: 99px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s .1s;
}
#lb-overlay.lb-open #lb-caption { opacity: 1; }

/* Cursor em qualquer imagem com data-lightbox */
[data-lightbox] { cursor: zoom-in; }

/* Utility */
.hidden { display: none !important; }


/* ── Badge de director de diretoria ────────────────────────────────────── */
.badge-diretor {
    display:inline-flex; align-items:center; gap:3px;
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px;
    background:linear-gradient(135deg,#3730A3,#6D28D9); color:#EDE9FE;
    white-space:nowrap; cursor:default; vertical-align:middle;
    box-shadow:0 1px 4px rgba(109,40,217,.35);
    border:1px solid rgba(167,139,250,.3);
}

/* ── Galeria de fotos de evento + lightbox com download (reaproveitável) ── */
.evf-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.evf-thumb { position:relative; border-radius:10px; overflow:hidden; cursor:zoom-in; aspect-ratio:1; background:var(--gray-100); }
.evf-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.evf-thumb:hover img { transform:scale(1.06); }
.evf-lightbox { display:none; position:fixed; inset:0; z-index:9999; background:rgba(10,10,15,.94); align-items:center; justify-content:center; }
.evf-lightbox.open { display:flex; }
.evf-lightbox img { max-width:90vw; max-height:78vh; object-fit:contain; border-radius:10px; box-shadow:0 20px 70px rgba(0,0,0,.6); }
.evf-lightbox-close { position:absolute; top:20px; right:22px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.evf-lightbox-close:hover { background:rgba(255,255,255,.24); }
.evf-lightbox-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.evf-lightbox-arrow:hover { background:rgba(255,255,255,.24); }
.evf-lightbox-prev { left:16px; } .evf-lightbox-next { right:16px; }
.evf-lightbox-counter { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:12px; font-weight:600; background:rgba(255,255,255,.12); padding:5px 14px; border-radius:99px; }
.evf-lightbox-download { position:absolute; bottom:22px; right:22px; color:#fff; font-size:12px; font-weight:700; background:rgba(255,255,255,.14); padding:8px 16px; border-radius:99px; text-decoration:none; display:flex; align-items:center; gap:6px; }
.evf-lightbox-download:hover { background:rgba(255,255,255,.26); }
/* iOS ignora <a download> e navega pra fora do app (fatal em modo standalone/PWA, sem chrome de
   volta) — nesse caso o clique mostra esta dica + botão de voltar em vez de navegar. */
.evf-ios-hint { display:none; position:absolute; bottom:16px; left:50%; transform:translateX(-50%); align-items:center; gap:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border-radius:99px; padding:8px 10px 8px 16px; max-width:88vw; }
.evf-ios-hint.show { display:flex; }
.evf-ios-hint span { color:#fff; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evf-ios-hint button { flex-shrink:0; border:none; background:#fff; color:#111; font-size:12px; font-weight:700; padding:7px 14px; border-radius:99px; cursor:pointer; }
@media (max-width:700px) {
    .evf-lightbox-arrow { width:40px; height:40px; font-size:22px; }
    .evf-lightbox-close { width:36px; height:36px; font-size:17px; }
}

/* ── Faixa/carrossel de fotos integrada ao convite (desliza + clica pra abrir) ── */
.evf-strip-wrap { margin-top:14px; min-width:0; max-width:100%; }
.evf-strip-title { font-size:11px; font-weight:700; color:var(--gray-400); margin-bottom:8px; text-align:left; }
.evf-strip-row { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.evf-strip { flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px; }
.evf-strip::-webkit-scrollbar { display:none; }
.evf-strip-item { flex:0 0 78px; width:78px; height:78px; border-radius:12px; overflow:hidden; cursor:pointer; scroll-snap-align:start; box-shadow:0 2px 8px rgba(0,0,0,.15); transition:transform .15s ease; }
.evf-strip-item:active { transform:scale(.94); }
.evf-strip-item img { width:100%; height:100%; object-fit:cover; display:block; }
.evf-strip-arrow { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid var(--gray-200); box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; color:var(--gray-700); }
.evf-strip-arrow:hover { background:var(--gray-50); }

/* ── Card de evento/serviço padronizado (Grandes Eventos, Convites, Ingressos, Reservas,
   Acompanhamentos) — um único componente pra toda a visão membro: imagem/skin contida no topo
   (nunca cobrindo o card inteiro), corpo branco com título+meta, rodapé com ações. Substitui o
   antigo padrão de "cartão-banner" com foto de fundo ocupando o card inteiro (mb-photo-card/
   mges-* conviviam com aparências diferentes na mesma tela) — decisão do Fabio (2026-07-14):
   um modelo só, mais compacto em grid, igual no desktop e no mobile. */
.evc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.evc-card { background:#fff; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); transition:box-shadow .15s,transform .15s; display:flex; flex-direction:column; min-width:0; text-decoration:none; color:inherit; }
.evc-card.evc-link:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.10); }
.evc-card.evc-inactive { opacity:.7; }
.evc-media-wrap { position:relative; flex-shrink:0; }
.evc-media { height:130px; background-size:cover; background-position:center; background-color:var(--brand-pale); display:flex; align-items:center; justify-content:center; }
.evc-media-icon { font-size:40px; opacity:.85; }
/* Modificador pra logo/marca (fundo claro + "contain" sem cortar, em vez de cobrir a área toda
   como uma foto) — sindicato, empresa, etc. Nunca usar cover pra logo, distorce/corta o desenho. */
.evc-media-contain { background-size:contain !important; background-repeat:no-repeat; background-color:#fff; padding:14px; box-sizing:border-box; }
.evc-badge { position:absolute; font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.evc-badge-left { top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff; }
.evc-badge-right { top:8px; right:8px; }
.evc-body { padding:14px 16px; flex:1; min-width:0; }
.evc-title { font-weight:700; font-size:15px; color:var(--gray-900); line-height:1.32; margin-bottom:4px; }
/* Trunca em uma linha só (com reticências) — usado sempre que o card precisa manter uma altura
   previsível independente do tamanho do nome (sindicato, empresa, vínculo); os cards de evento
   (convite/ingresso/grande evento) mantêm o título livre pra quebrar em 2 linhas, sem essa classe. */
.evc-title-1l { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evc-meta { font-size:12px; color:var(--gray-500); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evc-price { font-size:12px; font-weight:700; color:var(--brand-primary); margin-top:6px; }
.evc-footer { padding:12px 16px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
/* `<details>` cujo <summary> inteiro é montado com evc-media/evc-body (carteirinha de dependente,
   card de vínculo) — reseta o comportamento nativo do <summary> (marcador, cursor) sem herdar
   nenhum padding/flex de outro componente. */
.evc-card > summary.evc-summary { list-style:none; cursor:pointer; display:block; padding:0; gap:0; }
.evc-card > summary.evc-summary::-webkit-details-marker { display:none; }
.evc-title-row { display:flex; align-items:center; gap:6px; }
.evc-chevron { flex-shrink:0; font-size:11px; color:var(--gray-400); transition:transform .2s; }
.evc-card[open] .evc-chevron { transform:rotate(180deg); }
.evc-card[open] > summary.evc-summary { box-shadow:inset 0 -1px 0 var(--gray-100); }
.badge-diretor-sind { font-weight:500; opacity:.85; }

/* Card clicável dentro de .evc-card quando o card precisa de um .evc-footer com forms/botões de
   ação FORA do link (form não pode ficar dentro de <a>) — usado pelas listagens de gestão
   (empresas/pessoas/sócios/empregadores/usuários/sindicatos) que convertem linhas <details> pro
   sistema de cards, mas ainda precisam de ações rápidas (bloquear, confirmar, desvincular...). */
.evc-link-block { display:block; text-decoration:none; color:inherit; }

/* ── Busca ao vivo em listagens de empresa (sindicato/empresas, /empregadores, admin/empresas) —
   enquanto a busca por nome/CNPJ está em andamento, os cards ficam com um gradiente varrendo de
   um lado pro outro (indicador de carregamento sem esconder o conteúdo anterior nem pular layout). */
.evc-grid.is-searching { pointer-events:none; }
.evc-grid.is-searching .evc-card { position:relative; opacity:.6; overflow:hidden; }
.evc-grid.is-searching .evc-card::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
    background-size:250% 100%;
    animation:evcBuscaShimmer 1.1s linear infinite;
}
@keyframes evcBuscaShimmer {
    0%   { background-position:180% 0; }
    100% { background-position:-80% 0; }
}

/* ── Paginação compacta (Liritus\Helpers\Paginador::render()) — janela de páginas ao redor da
   atual + atalho pra primeira/última, em vez de listar um botão por página inteira. */
.pag { display:flex;align-items:center;gap:4px;justify-content:center;margin-top:20px;flex-wrap:wrap; }
.pag a, .pag span { padding:6px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;border:1px solid var(--gray-200);color:var(--gray-600);text-decoration:none;transition:var(--transition); }
.pag a:hover { background:var(--gray-100); }
.pag .active   { background:var(--brand-primary);color:white;border-color:var(--brand-primary); }
.pag .disabled { color:var(--gray-300);pointer-events:none; }
.pag .pag-dots { border:none;padding:6px 4px; }

/* ── Painel de estatísticas antes da busca (Liritus\Helpers\Charts) — grid de gráficos 100%
   CSS/HTML (sem lib externa), mostrado no lugar do grid de cards só quando o campo de busca da
   listagem está vazio. Ver CLAUDE.md, seção "Padrões visuais". */
.lc-dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:20px; max-width:100%; }
.lc-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 20px; min-width:0; overflow:hidden; box-sizing:border-box; }
.lc-title { font-size:12px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }

.lc-donut { width:88px; height:88px; border-radius:50%; flex-shrink:0; position:relative; }
.lc-donut-hole {
    position:absolute; inset:14px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:800; color:var(--gray-900);
    overflow:hidden; padding:0 2px; box-sizing:border-box;
}

.lc-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; min-width:0; }
.lc-bar-row:last-child { margin-bottom:0; }
.lc-bar-label { font-size:12px; color:var(--gray-600); width:96px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-bar-track { flex:1; min-width:0; height:10px; background:var(--gray-100); border-radius:99px; overflow:hidden; }
.lc-bar-fill { height:100%; border-radius:99px; }
.lc-bar-value { font-size:12px; font-weight:700; color:var(--gray-800); width:32px; text-align:right; flex-shrink:0; overflow:hidden; white-space:nowrap; }

.lc-spark { display:flex; align-items:flex-end; gap:6px; height:110px; }
.lc-spark-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.lc-spark-bar { width:100%; max-width:22px; background:var(--brand-primary); border-radius:4px 4px 0 0; }
.lc-spark-lbl { font-size:10px; color:var(--gray-400); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

@media (max-width:600px) {
    .lc-dash-grid { grid-template-columns:1fr; }
    .lc-bar-label { width:76px; }
}

/* ── Linha do tempo genérica (histórico de administração de empresa por escritório, e qualquer
   futuro histórico de período/evento) — trilho vertical com um ponto colorido por item.
   .adm-tl-dot fica DENTRO de .adm-tl-item (que é position:relative), deslocado pra esquerda até
   coincidir com o trilho desenhado por .adm-timeline::before — ver cálculo comentado abaixo. */
.adm-timeline { position:relative; padding:18px 20px 4px 44px; }
.adm-timeline::before { content:''; position:absolute; left:21px; top:22px; bottom:22px; width:2px; background:var(--gray-200); }
.adm-tl-item { position:relative; padding-bottom:22px; }
.adm-tl-item:last-child { padding-bottom:0; }
.adm-tl-dot { position:absolute; left:-32px; top:0; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; box-shadow:0 0 0 3px #fff; z-index:1; }
.adm-tl-period { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-400); margin-bottom:3px; }

/* ── Selo do sindicato — carteirinha digital e convites (membro/carteirinha.php, evento e
   convite-evento.php). Medalha que fica pendurada acima do cartão, meio pra dentro meio pra fora
   (o cartão logo abaixo sobe com margin-top negativo pra "encaixar" sob a metade de baixo do
   selo), sempre visível independente de o sindicato ter skin configurada ou não. A cor do halo/
   anel usa --crt-accent (definida inline por card a partir da cor de destaque da skin ativa),
   caindo pra --brand-primary quando não há skin. Nunca fica dentro de um container com
   overflow:hidden (.cve-card recorta os cantos da imagem de fundo) — por isso o selo é sempre
   IRMÃO do cartão, nunca filho, evitando qualquer corte visual. */
.crt-logo-badge-wrap { position:relative; width:132px; height:132px; margin:0 auto; z-index:3; }
.crt-logo-badge-wrap::before {
    content:''; position:absolute; inset:-20px; border-radius:50%;
    background:radial-gradient(circle, var(--crt-accent, var(--brand-primary)) 0%, transparent 70%);
    opacity:.32; animation:crtHaloPulse 3.6s ease-in-out infinite;
}
@keyframes crtHaloPulse {
    0%, 100% { transform:scale(1); opacity:.3; }
    50%      { transform:scale(1.14); opacity:.5; }
}
@media (prefers-reduced-motion: reduce) { .crt-logo-badge-wrap::before { animation:none; } }
.crt-logo-badge {
    position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
    background:#fff; border:4px solid var(--crt-accent, var(--brand-primary));
    box-shadow:0 12px 30px rgba(0,0,0,.22), 0 0 0 6px #fff;
    display:flex; align-items:center; justify-content:center; overflow:hidden; padding:14px;
}
.crt-logo-badge img { width:100%; height:100%; object-fit:contain; }
.crt-logo-badge .crt-logo-fallback { font-size:40px; font-weight:800; color:var(--crt-accent, var(--brand-primary)); line-height:1; }
/* O cartão logo abaixo do selo ganha essa classe: sobe por baixo do selo (metade de baixo do
   círculo fica sobreposta ao topo arredondado do cartão) e abre espaço extra no padding-top pra
   o conteúdo interno não ficar espremido contra o selo. */
.crt-card.has-badge, .cve-card.has-badge { margin-top:-66px; }
.crt-card.has-badge { padding-top:80px; }
.cve-card.has-badge .cve-hero { padding-top:80px; }

/* ── Foto do sócio/convidado — mesmo recurso do selo do logo (halo pulsante + anel na cor da
   skin + sombra de "sobreposição"), mas SEMPRE contida dentro do cartão — diferente do selo do
   logo, esta nunca escapa pra fora (o efeito de profundidade vem só do halo/sombra, nunca de
   vazar de verdade pra cima do cartão). Reaproveita @keyframes crtHaloPulse já definida acima. */
.crt-av-badge-wrap { position:relative; width:112px; height:112px; margin:0 auto 14px; }
.crt-av-badge-wrap::before {
    content:''; position:absolute; inset:-14px; border-radius:50%;
    background:radial-gradient(circle, var(--crt-accent, var(--brand-primary)) 0%, transparent 70%);
    opacity:.28; animation:crtHaloPulse 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .crt-av-badge-wrap::before { animation:none; } }
.crt-av-badge-wrap .crt-av,
.crt-av-badge-wrap .crt-av-fallback {
    position:relative; z-index:1; width:100%; height:100%; margin:0;
    border:4px solid var(--crt-accent, var(--brand-primary));
    box-shadow:0 14px 28px rgba(0,0,0,.32), 0 0 0 5px #fff;
}

/* ============================================================
   UTILITÁRIOS MODERNOS — camada adicional, estilo Tailwind (2026-07-13)
   ============================================================
   Puramente aditivo: nenhuma classe já existente acima foi alterada. .mt-4/.mt-8/.mt-16/.mt-24/
   .mt-32/.mb-8/.mb-16/.mb-24/.mb-32/.gap-8/.gap-12/.gap-16/.text-sm/.text-xs/.flex/.w-full/.hidden
   continuam com o mesmo significado de sempre (usados em centenas de páginas). As classes novas
   abaixo usam índices que NUNCA colidem com essas — ex: .gap-2/.gap-3/.gap-4 são novas, nunca
   redefinem .gap-8/.gap-12/.gap-16.

   Escala de espaçamento (índice × 4px, convenção Tailwind): 1=4px 1.5=6px 2=8px 2.5=10px 3=12px
   3.5=14px 4=16px 5=20px 6=24px 8=32px 10=40px 12=48px. Regra pra extensão futura: antes de criar
   um novo ".mt-N"/".mb-N"/".gap-N", confira se esse N já é usado no bloco de utilitários legado
   acima com outro valor — se for, use um índice livre ou prefixo diferente.

   Sem build/gerador: este é um subconjunto curado (não é "todo o Tailwind"), pensado pro que os
   componentes desta rodada (login) precisam. Estender sob demanda, não preventivamente.
   ============================================================ */

:root {
    --radius-2xl:     28px;
    --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
    --shadow-xl:      0 20px 48px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.06);
    --ease-out-back:  cubic-bezier(.34,1.56,.64,1);
}

/* --- Padding --- */
.p-0  { padding: 0; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.p-10 { padding: 40px; }

.px-2  { padding-left:8px;  padding-right:8px; }
.px-3  { padding-left:12px; padding-right:12px; }
.px-4  { padding-left:16px; padding-right:16px; }
.px-5  { padding-left:20px; padding-right:20px; }
.px-6  { padding-left:24px; padding-right:24px; }
.px-8  { padding-left:32px; padding-right:32px; }
.px-10 { padding-left:40px; padding-right:40px; }

.py-1   { padding-top:4px;  padding-bottom:4px; }
.py-1\.5{ padding-top:6px;  padding-bottom:6px; }
.py-2   { padding-top:8px;  padding-bottom:8px; }
.py-2\.5{ padding-top:10px; padding-bottom:10px; }
.py-3   { padding-top:12px; padding-bottom:12px; }
.py-3\.5{ padding-top:14px; padding-bottom:14px; }
.py-4   { padding-top:16px; padding-bottom:16px; }
.py-6   { padding-top:24px; padding-bottom:24px; }
.py-10  { padding-top:40px; padding-bottom:40px; }

/* --- Margem inferior (índices novos — nunca redefine .mb-8/.mb-16/.mb-24/.mb-32) --- */
.mb-1    { margin-bottom:4px; }
.mb-1\.5 { margin-bottom:6px; }
.mb-2    { margin-bottom:8px; }
.mb-3    { margin-bottom:12px; }
.mb-6    { margin-bottom:24px; }

/* --- Gap (índices novos — nunca redefine .gap-8/.gap-12/.gap-16) --- */
.gap-1    { gap:4px; }
.gap-1\.5 { gap:6px; }
.gap-2    { gap:8px; }
.gap-3    { gap:12px; }
.gap-4    { gap:16px; }
.gap-5    { gap:20px; }
.gap-6    { gap:24px; }

/* --- Bordas arredondadas (alias dos tokens --radius-*, mantém a mesma identidade visual) --- */
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --- Sombras (alias dos tokens --shadow-*) --- */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* --- Tipografia (valores Tailwind-padrão; .text-xs/.text-sm legados continuam intocados) --- */
.text-base { font-size: 16px; }
.text-lg   { font-size: 18px; }
.text-xl   { font-size: 20px; }
.text-2xl  { font-size: 24px; }
.text-3xl  { font-size: 30px; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* --- Cores de marca e neutros (nomes explícitos, ao lado de .text-brand/.text-muted legados) --- */
.bg-brand       { background: var(--brand-primary); }
.bg-brand-dark  { background: var(--brand-dark); }
.bg-brand-light { background: var(--brand-light); }
.bg-brand-pale  { background: var(--brand-pale); }
.bg-white       { background: var(--white); }
.bg-gray-50     { background: var(--gray-50); }
.bg-gray-100    { background: var(--gray-100); }
.text-white     { color: var(--white); }
.text-gray-500  { color: var(--gray-500); }
.text-gray-600  { color: var(--gray-600); }
.text-gray-700  { color: var(--gray-700); }
.text-gray-900  { color: var(--gray-900); }

/* --- Flex / layout --- */
.inline-flex     { display: inline-flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1 1 0%; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }

/* --- Transições --- */
.transition-all       { transition: transform .2s var(--ease-out-back), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.transition-colors    { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.transition-transform { transition: transform .2s var(--ease-out-back); }
.transition-shadow    { transition: box-shadow .2s ease; }

/* --- Interação: hover / active (":" escapado, convenção Tailwind) --- */
.hover\:bg-brand-dark:hover     { background: var(--brand-dark); }
.hover\:bg-gray-50:hover        { background: var(--gray-50); }
.hover\:shadow-lg:hover         { box-shadow: var(--shadow-lg); }
.hover\:shadow-md:hover         { box-shadow: var(--shadow-md); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }
.hover\:-translate-y-1:hover    { transform: translateY(-4px); }
.hover\:scale-105:hover         { transform: scale(1.05); }
.active\:scale-95:active       { transform: scale(.95); }
.active\:scale-98:active       { transform: scale(.98); }

/* --- Efeito glass — com fallback pra navegadores/dispositivos sem backdrop-filter (a pesquisa
   de mercado 2026 aponta custo de performance em aparelhos mais simples/antigos: nunca depender
   só dele pra legibilidade). Fundo semi-opaco sólido primeiro, "vidro" só como progressive
   enhancement via @supports. --- */
.glass {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.6);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
        background: rgba(255,255,255,.68);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
}

/* --- Responsivo (prefixo lg:, ≥1024px — mobile-first: a classe base sem prefixo é a versão
   mobile; lg: só sobrescreve em telas grandes) --- */
@media (min-width: 1024px) {
    .lg\:text-base { font-size: 16px; }
    .lg\:text-lg   { font-size: 18px; }
    .lg\:text-xl   { font-size: 20px; }
    .lg\:text-2xl  { font-size: 24px; }
    .lg\:p-10      { padding: 40px; }
    .lg\:px-8      { padding-left:32px; padding-right:32px; }
    .lg\:py-4      { padding-top:16px; padding-bottom:16px; }
}

/* Acessibilidade: respeita preferência do usuário por menos movimento — não muda nada por padrão,
   só desativa a animação/transform pra quem pediu ao sistema operacional pra reduzir movimento. */
@media (prefers-reduced-motion: reduce) {
    .transition-all, .transition-transform,
    .hover\:-translate-y-0\.5:hover, .hover\:-translate-y-1:hover, .hover\:scale-105:hover,
    .active\:scale-95:active, .active\:scale-98:active {
        transition: none !important;
        transform: none !important;
    }
    .animate-fadeUp { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   BOTÕES v2 — novo padrão visual (gradiente, elevação no hover, "press"
   no active). Convive com .btn/.btn-primary (legado, usado em centenas
   de páginas) sem alterá-los — só aplicado onde explicitamente adotado
   (por enquanto: tela de login).
   ============================================================ */
.btn2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    min-height: 48px; /* alvo de toque acessível (≥44-48px) */
    border-radius: var(--radius-xl);
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden; /* clipa o brilho (::before) nos cantos arredondados */
    transition: transform .2s var(--ease-out-back), box-shadow .2s ease, background .2s ease;
}
.btn2:hover  { transform: translateY(-2px); color: inherit; }
.btn2:active { transform: scale(.97); }
.btn2 svg { flex-shrink: 0; position: relative; z-index: 1; }

.btn2-primary {
    background: var(--brand-gradient);
    color: var(--white);
    box-shadow: var(--shadow-brand);
}
.btn2-primary:hover { box-shadow: 0 14px 32px rgba(155,94,26,.38); color: var(--white); }

/* Brilho "espelhado" que varre o botão no hover — só nos sólidos (.btn2-primary), não faz
   sentido visual sobre o fundo já quase branco de .btn2-ghost. */
.btn2-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .5s ease;
    pointer-events: none;
}
.btn2-primary:hover::before { left: 100%; }

.btn2-ghost {
    background: rgba(255,255,255,.7);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
}
.btn2-ghost:hover { background: var(--white); border-color: var(--brand-light); color: var(--brand-dark); }

.btn2-block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .btn2, .btn2:hover, .btn2:active, .btn2-primary::before { transition: none; transform: none; }
}

/* ============================================================
   FORMULÁRIOS v2 — modificadores aditivos sobre .form-input/.form-group
   já existentes (não altera o padrão base usado em centenas de forms).
   ============================================================ */
.form-input-lg {
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    font-size: 16px; /* ≥16px evita zoom automático do iOS Safari ao focar o campo */
    min-height: 48px;
}
.form-input-lg:focus { box-shadow: 0 0 0 4px rgba(196,122,42,.14); }

.input-icon-wrap { position: relative; }
.input-icon-wrap .form-input { padding-left: 44px; }
.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--gray-400);
    pointer-events: none;
}

/* Botão "mostrar senha" — quando presente, some espaço à direita do input pra não sobrepor o
   texto digitado. */
.input-icon-wrap.has-toggle .form-input { padding-right: 44px; }
.input-toggle-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    cursor: pointer;
    transition: var(--transition);
}
.input-toggle-eye:hover { color: var(--gray-700); background: var(--gray-100); }
.input-toggle-eye svg { width: 18px; height: 18px; }
.input-toggle-eye .icon-eye-off { display: none; }
.input-toggle-eye.is-visible .icon-eye     { display: none; }
.input-toggle-eye.is-visible .icon-eye-off { display: block; }

/* ============================================================
   LAYOUT MODERNO LIRITUS — ativado pela classe .lm
   (CSS puro, estilo utilitário, sem SCSS)
   ============================================================ */

.lm {
    /* --- Reset básico dentro do escopo --- */
    all: initial;
}

.lm,
.lm * {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.lm body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    background-color: #ffffff;
    color: #111827;
}

/* --- Utilitários de layout --- */
.lm .relative { position: relative; }
.lm .absolute { position: absolute; }
.lm .fixed { position: fixed; }
.lm .sticky { position: sticky; }
.lm .inset-0 { inset: 0; }
.lm .top-1\/2 { top: 50%; }
.lm .right-2 { right: 0.5rem; }
.lm .right-3 { right: 0.75rem; }
.lm .-translate-y-1\/2 { transform: translateY(-50%); }
.lm .z-10 { z-index: 10; }
.lm .z-50 { z-index: 50; }
.lm .overflow-hidden { overflow: hidden; }
.lm .overflow-x-auto { overflow-x: auto; }
.lm .overflow-y-auto { overflow-y: auto; }
.lm .cursor-pointer { cursor: pointer; }

/* --- Display --- */
.lm .block { display: block; }
.lm .inline-block { display: inline-block; }
.lm .inline { display: inline; }
.lm .flex { display: flex; }
.lm .inline-flex { display: inline-flex; }
.lm .grid { display: grid; }
.lm .hidden { display: none; }

/* --- Flexbox --- */
.lm .flex-row { flex-direction: row; }
.lm .flex-col { flex-direction: column; }
.lm .flex-wrap { flex-wrap: wrap; }
.lm .flex-1 { flex: 1 1 0%; }
.lm .flex-shrink-0 { flex-shrink: 0; }
.lm .items-start { align-items: flex-start; }
.lm .items-center { align-items: center; }
.lm .items-end { align-items: flex-end; }
.lm .justify-start { justify-content: flex-start; }
.lm .justify-center { justify-content: center; }
.lm .justify-end { justify-content: flex-end; }
.lm .justify-between { justify-content: space-between; }
.lm .gap-1 { gap: 0.25rem; }
.lm .gap-1\.5 { gap: 0.375rem; }
.lm .gap-2 { gap: 0.5rem; }
.lm .gap-2\.5 { gap: 0.625rem; }
.lm .gap-3 { gap: 0.75rem; }
.lm .gap-4 { gap: 1rem; }
.lm .gap-5 { gap: 1.25rem; }
.lm .gap-6 { gap: 1.5rem; }

/* --- Espaçamento --- */
.lm .mx-auto { margin-left: auto; margin-right: auto; }
.lm .mt-1 { margin-top: 0.25rem; }
.lm .mt-1\.5 { margin-top: 0.375rem; }
.lm .mt-2 { margin-top: 0.5rem; }
.lm .mt-3 { margin-top: 0.75rem; }
.lm .mt-4 { margin-top: 1rem; }
.lm .mt-5 { margin-top: 1.25rem; }
.lm .mt-6 { margin-top: 1.5rem; }
.lm .mt-8 { margin-top: 2rem; }
.lm .mt-12 { margin-top: 3rem; }
.lm .mb-1 { margin-bottom: 0.25rem; }
.lm .mb-1\.5 { margin-bottom: 0.375rem; }
.lm .mb-2 { margin-bottom: 0.5rem; }
.lm .mb-3 { margin-bottom: 0.75rem; }
.lm .mb-4 { margin-bottom: 1rem; }
.lm .mb-6 { margin-bottom: 1.5rem; }
.lm .mb-8 { margin-bottom: 2rem; }
.lm .p-0 { padding: 0; }
.lm .p-1 { padding: 0.25rem; }
.lm .p-2 { padding: 0.5rem; }
.lm .p-3 { padding: 0.75rem; }
.lm .p-4 { padding: 1rem; }
.lm .p-5 { padding: 1.25rem; }
.lm .p-6 { padding: 1.5rem; }
.lm .p-8 { padding: 2rem; }
.lm .px-0 { padding-left: 0; padding-right: 0; }
.lm .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.lm .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.lm .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.lm .px-4 { padding-left: 1rem; padding-right: 1rem; }
.lm .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.lm .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.lm .px-8 { padding-left: 2rem; padding-right: 2rem; }
.lm .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.lm .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.lm .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.lm .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.lm .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.lm .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.lm .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.lm .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.lm .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.lm .pt-2 { padding-top: 0.5rem; }
.lm .pt-6 { padding-top: 1.5rem; }
.lm .pr-12 { padding-right: 3rem; }

/* --- Largura / Altura --- */
.lm .w-full { width: 100%; }
.lm .w-1\/2 { width: 50%; }
.lm .w-4 { width: 1rem; }
.lm .w-10 { width: 2.5rem; }
.lm .max-w-md { max-width: 28rem; }
.lm .max-w-lg { max-width: 32rem; }
.lm .max-w-2xl { max-width: 42rem; }
.lm .min-h-screen { min-height: 100vh; }
.lm .min-h-0 { min-height: 0px; }
.lm .min-h-\[40px\] { min-height: 40px; }
.lm .min-h-\[44px\] { min-height: 44px; }
.lm .min-h-\[56px\] { min-height: 56px; }
.lm .min-w-\[44px\] { min-width: 44px; }
.lm .h-4 { height: 1rem; }
.lm .h-10 { height: 2.5rem; }
.lm .h-16 { height: 4rem; }
.lm .h-20 { height: 5rem; }

/* --- Cores de fundo (usando variáveis existentes) --- */
.lm .bg-white { background-color: #ffffff; }
.lm .bg-gray-50 { background-color: #f9fafb; }
.lm .bg-gray-100 { background-color: #f3f4f6; }
.lm .bg-red-50 { background-color: #fef2f2; }
.lm .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.lm .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.lm .bg-brand-pale { background-color: var(--brand-pale); }

/* --- Cores de texto (usando variáveis existentes) --- */
.lm .text-white { color: #ffffff; }
.lm .text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.lm .text-gray-400 { color: #9ca3af; }
.lm .text-gray-500 { color: #6b7280; }
.lm .text-gray-700 { color: #374151; }
.lm .text-gray-900 { color: #111827; }
.lm .text-red-700 { color: #b91c1c; }
.lm .text-green-500 { color: #22c55e; }
.lm .text-brand-primary { color: var(--brand-primary); }

/* --- Tipografia --- */
.lm .font-sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.lm .text-xs { font-size: 0.75rem; line-height: 1rem; }
.lm .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.lm .text-base { font-size: 1rem; line-height: 1.5rem; }
.lm .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.lm .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.lm .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.lm .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.lm .font-medium { font-weight: 500; }
.lm .font-semibold { font-weight: 600; }
.lm .font-bold { font-weight: 700; }
.lm .text-center { text-align: center; }
.lm .text-left { text-align: left; }
.lm .text-right { text-align: right; }
.lm .leading-tight { line-height: 1.25; }
.lm .leading-relaxed { line-height: 1.625; }

/* --- Bordas --- */
.lm .border { border-width: 1px; }
.lm .border-0 { border-width: 0px; }
.lm .border-2 { border-width: 2px; }
.lm .border-t { border-top-width: 1px; }
.lm .border-b { border-bottom-width: 1px; }
.lm .border-l { border-left-width: 1px; }
.lm .border-r { border-right-width: 1px; }
.lm .border-gray-100 { border-color: #f3f4f6; }
.lm .border-gray-200 { border-color: #e5e7eb; }
.lm .border-gray-300 { border-color: #d1d5db; }
.lm .border-red-200 { border-color: #fecaca; }
.lm .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.lm .border-brand-light { border-color: var(--brand-light); }
.lm .rounded { border-radius: 0.25rem; }
.lm .rounded-md { border-radius: 0.375rem; }
.lm .rounded-lg { border-radius: 0.5rem; }
.lm .rounded-xl { border-radius: 0.75rem; }
.lm .rounded-2xl { border-radius: 1rem; }
.lm .rounded-full { border-radius: 9999px; }

/* --- Sombras e efeitos --- */
.lm .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.lm .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.lm .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

/* --- Transições --- */
.lm .transition-all { transition-property: all; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.lm .transition-ease { transition: ease all 0.4s; }
.lm .transition-colors { transition-property: color, background-color, border-color; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.lm .transition-transform { transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Interação --- */
.lm .cursor-pointer { cursor: pointer; }
.lm .cursor-not-allowed { cursor: not-allowed; }
.lm .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.lm .hover\:text-gray-600:hover { color: #4b5563; }
.lm .hover\:underline:hover { text-decoration: underline; }
.lm .hover\:brightness-110:hover { filter: brightness(1.1); }
.lm .focus\:bg-white:focus { background-color: #ffffff; }
.lm .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.lm .focus\:border-brand-light:focus { border-color: var(--brand-light); }
.lm .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000; }
.lm .focus\:ring-4:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000; }
.lm .active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.lm .disabled\:opacity-70:disabled { opacity: 0.7; }
.lm .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* --- Efeitos visuais --- */
.lm .backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lm .object-contain { object-fit: contain; }
.lm .object-cover { object-fit: cover; }

/* --- Espaçamento vertical (gap entre elementos filhos) --- */
.lm .space-y-1\.5 > * + * { margin-top: 0.375rem; }
.lm .space-y-5 > * + * { margin-top: 1.25rem; }
.lm .space-y-6 > * + * { margin-top: 1.5rem; }
.lm .space-y-8 > * + * { margin-top: 2rem; }

/* --- Grupos (hover em grupo) --- */
.lm .group:hover .group-hover\:text-gray-700 { color: #374151; }
.lm .group:hover .group-hover\:text-brand-primary { color: var(--brand-primary); }

/* --- BOTÃO MODERNO COM SHIMMER --- */
.lm .btn-modern {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-light), var(--brand-primary));
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    width: 100%;
}
.lm .btn-modern::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}
.lm .btn-modern:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    filter: brightness(1.1);
    transform: translateY(-2px);
}
.lm .btn-modern:hover::before {
    left: 100%;
}
.lm .btn-modern:active {
    transform: scale(0.98);
}
.lm .btn-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* --- Ajustes para inputs e elementos de formulário --- */
.lm input,
.lm select,
.lm textarea {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
    background-color: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    transition: all 0.15s ease;
    outline: none;
    width: 100%;
}
.lm input:focus,
.lm select:focus,
.lm textarea:focus {
    background-color: #ffffff;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 4px rgba(196, 122, 42, 0.2);
}
.lm input::placeholder,
.lm textarea::placeholder {
    color: #9ca3af;
}

.lm .login-bg {
    display: none; /* oculto no mobile */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   COMPONENTES REUTILIZÁVEIS PARA CADASTRO EM ETAPAS
   ============================================================ */

/* .form-input-modern já está definido no main.css, mas garantimos consistência */
.lm .form-input-modern {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    background-color: #f9fafb;
    font-size: 1rem;
    color: #111827;
    outline: none;
    transition: all 0.15s ease;
    font-family: inherit;
    min-height: 52px; /* mesmo padrão do login */
}
.lm .form-input-modern:focus {
    background-color: #ffffff;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 4px rgba(196, 122, 42, 0.2);
}
.lm .form-input-modern::placeholder {
    color: #9ca3af;
}
.lm .form-input-modern.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* Botões modernos (já definidos em .lm, mas reforçamos) */
.lm .btn-modern {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-light), var(--brand-primary));
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}
.lm .btn-modern::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}
.lm .btn-modern:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    filter: brightness(1.1);
    transform: translateY(-2px);
}
.lm .btn-modern:hover::before {
    left: 100%;
}
.lm .btn-modern:active {
    transform: scale(0.98);
}
.lm .btn-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.lm .btn-modern-ghost {
    background: transparent !important;
    color: var(--brand-primary) !important;
    border: 2px solid var(--brand-light) !important;
    box-shadow: none !important;
}
.lm .btn-modern-ghost:hover {
    background: var(--brand-pale) !important;
    filter: none !important;
    transform: translateY(-2px);
}

/* Ajuste para botões full width */
.lm .btn-modern.w-full {
    width: 100%;
    justify-content: center;
}

/* Toast container */
.lm #toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 100%;
    max-width: 24rem;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lm #toast-container > div {
    pointer-events: auto;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    word-break: break-word;
    max-width: 400px;
}
.lm .toast-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.lm .toast-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}
.lm .toast-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.lm .toast-info {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Utilitários de grid */
.lm .grid { display: grid; }
.lm .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lm .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lm .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lm .sm\:col-span-1 { grid-column: span 1 / span 1; }
.lm .sm\:col-span-2 { grid-column: span 2 / span 2; }
.lm .gap-4 { gap: 1rem; }

/* --- Responsividade --- */
@media (min-width: 640px) {
    .lm .sm\:p-6 { padding: 1.5rem; }
    .lm .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .lm .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .lm .sm\:h-20 { height: 5rem; }
    .lm .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .lm .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 768px) {
    .lm .md\:flex { display: flex; }
    .lm .md\:hidden { display: none; }
    .lm .md\:w-1\/2 { width: 50%; }
    .lm .md\:flex-row { flex-direction: row; }
    .lm .md\:p-8 { padding: 2rem; }
    .lm .md\:space-y-8 > * + * { margin-top: 2rem; }
    .lm .md\:text-left { text-align: left; }
    .lm .md\:justify-start { justify-content: flex-start; }
    .lm .md\:mt-2 { margin-top: 0.5rem; }
    .lm .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 1024px) {
    .lm .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
    .lm .lg\:h-24 { height: 6rem; }
    .lm .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lm .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (min-width: 1280px) {
    .lm .xl\:text-5xl { font-size: 3rem; line-height: 1; }
}