/* ==========================================================================
   BOME — layout responsivo (desktop + mobile/PWA)
   Base: Bootstrap 5.3. Este arquivo só ajusta o visual e o comportamento
   em telas pequenas; as telas continuam usando as mesmas classes.
   ========================================================================== */

:root {
    --app-bg: #f4f6fb;
    --app-surface: #ffffff;
    --app-line: #e6e9f0;
    --app-line-soft: #f0f2f7;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-primary: #2563eb;
    --app-primary-600: #1d4ed8;
    --app-primary-50: #eff4ff;
    --app-sidebar: #0f172a;
    --app-sidebar-2: #1e293b;
    --app-radius: 14px;
    --app-radius-sm: 10px;
    --app-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
    --app-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
    --sidebar-width: 260px;
    --topbar-h: 60px;
    --bottomnav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Bootstrap */
    --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-bg);
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-border-color: var(--app-line);
    --bs-border-radius: .55rem;
}

html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    background: var(--app-bg);
    font-family: var(--bs-body-font-family);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary {
    --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-600); --bs-btn-hover-border-color: var(--app-primary-600);
    --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primary); --bs-btn-border-color: #bfd0fb;
    --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-600); --bs-btn-active-border-color: var(--app-primary-600);
}
.btn-outline-secondary {
    --bs-btn-color: #475569; --bs-btn-border-color: var(--app-line); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-color: var(--app-text); --bs-btn-hover-border-color: #d5dae3;
    --bs-btn-active-bg: #e2e8f0; --bs-btn-active-color: var(--app-text); --bs-btn-active-border-color: #cbd5e1;
}
.btn-secondary {
    --bs-btn-color: #334155; --bs-btn-bg: #eef1f6; --bs-btn-border-color: #eef1f6;
    --bs-btn-hover-color: var(--app-text); --bs-btn-hover-bg: #e2e8f0; --bs-btn-hover-border-color: #e2e8f0;
    --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: #d5dbe5; --bs-btn-active-border-color: #d5dbe5;
}
.btn { font-weight: 500; border-radius: .6rem; }
.btn-sm { border-radius: .5rem; }
.form-control, .form-select { border-radius: .6rem; border-color: #dde2ea; }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.form-label { font-weight: 500; color: #334155; }
.dropdown-menu { border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: .45rem; padding: .5rem .75rem; }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--app-shadow-lg); }
.alert { border: 0; border-radius: var(--app-radius-sm); }
.alert-success { background: #ecfdf3; color: #166534; }
.alert-danger { background: #fef2f2; color: #991b1b; }
.breadcrumb { font-size: .8rem; --bs-breadcrumb-divider-color: #94a3b8; }
.breadcrumb-item.active { color: var(--app-muted); }
kbd { background: #e2e8f0; color: #334155; border-radius: .3rem; font-size: .75rem; }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
.page-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--app-sidebar) 0%, var(--app-sidebar-2) 100%);
    position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column;
    z-index: 1040;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.1rem; }
.sidebar-brand .brand-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.sidebar-brand .brand-name { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; line-height: 1.1; }
.sidebar-brand .brand-sub { color: rgba(255, 255, 255, .45); font-size: .72rem; }
.sidebar-close { margin-left: auto; color: rgba(255, 255, 255, .6); background: none; border: 0; font-size: 1.4rem; padding: .25rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .25rem .65rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.sidebar-section { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .35); padding: 1rem .65rem .35rem; }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a {
    display: flex; align-items: center; gap: .7rem;
    color: rgba(255, 255, 255, .68); text-decoration: none;
    padding: .55rem .7rem; margin: 2px 0; border-radius: .6rem;
    font-size: .88rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-nav li a i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.sidebar-nav li a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-nav li a.active { background: var(--app-primary); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.sidebar-nav li a.active i { opacity: 1; }

.sidebar-user { border-top: 1px solid rgba(255, 255, 255, .07); padding: .85rem 1rem calc(.85rem + var(--safe-bottom)); display: flex; align-items: center; gap: .65rem; }
.sidebar-user .user-name { color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.2; }
.sidebar-user .user-role { color: rgba(255, 255, 255, .45); font-size: .72rem; }
.sidebar-user .btn-logout { margin-left: auto; color: rgba(255, 255, 255, .55); font-size: 1.15rem; padding: .3rem .4rem; border-radius: .5rem; }
.sidebar-user .btn-logout:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .8rem; flex-shrink: 0; letter-spacing: .02em;
}

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); z-index: 1035; }
.sidebar-overlay.active { display: block; }

.main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .28s cubic-bezier(.4, 0, .2, 1); }
.no-transition .sidebar, .no-transition .main-content { transition: none !important; }

.topbar {
    height: var(--topbar-h);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--app-line);
    padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    position: sticky; top: 0; z-index: 1020;
}
.topbar-title { font-size: .95rem; font-weight: 600; color: var(--app-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: .6rem; }
.topbar .user-btn { display: flex; align-items: center; gap: .55rem; background: none; border: 0; padding: .25rem .4rem; border-radius: .6rem; color: var(--app-text); }
.topbar .user-btn:hover { background: #f1f5f9; }
.topbar .user-btn .user-name { font-size: .85rem; font-weight: 500; }

.content-area { padding: 1.5rem; flex: 1; width: 100%; max-width: 1600px; }

@media (min-width: 992px) {
    .page-wrapper.sidebar-collapsed .sidebar { transform: translateX(-100%); }
    .page-wrapper.sidebar-collapsed .main-content { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Componentes das telas
   -------------------------------------------------------------------------- */
.page-header { margin-bottom: 1.25rem; gap: .75rem 1rem; flex-wrap: wrap; }
.page-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--app-text); margin: 0; letter-spacing: -.01em; }
.page-header > div:last-child:not(:first-child) { flex-wrap: wrap; }

.card, .stat-card { border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg); }

.table-card, .form-card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow); }
.table-card { overflow-x: auto; overflow-y: hidden; }
.form-card { padding: 1.5rem; }
.section-divider { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); border-bottom: 1px solid var(--app-line); padding-bottom: .5rem; margin: 1.5rem 0 1rem; }
.form-card > .section-divider:first-child { margin-top: 0; }

.table-card .table { margin: 0; --bs-table-bg: transparent; }
.table-card .table thead th { background: #f8fafc; color: var(--app-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--app-line); padding: .75rem 1rem; white-space: nowrap; }
.table-card .table tbody td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--app-line-soft); font-size: .875rem; }
.table-card .table tbody tr:last-child td { border-bottom: 0; }
.table-card .table tbody tr { transition: background .12s; }
.table-card .table tbody tr:hover { background: #f8fafc; }

.badge { font-weight: 600; letter-spacing: .01em; }
.badge-ativo { background: #dcfce7; color: #166534; }
.badge-inativo { background: #fee2e2; color: #991b1b; }

/* DataTables */
.table-card .dataTables_wrapper { padding: 0; }
.table-card .dataTables_length, .table-card .dataTables_filter { padding: .9rem 1rem .5rem; }
.table-card .dataTables_length label, .table-card .dataTables_filter label { font-size: .85rem; color: var(--app-muted); margin: 0; }
.table-card .dataTables_filter input { border: 1px solid #dde2ea; border-radius: .6rem; padding: .4rem .75rem; font-size: .875rem; outline: none; min-width: 240px; }
.table-card .dataTables_filter input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.table-card .dataTables_info { padding: .6rem 1rem .9rem; font-size: .8rem; color: var(--app-muted); border-top: 1px solid var(--app-line-soft); }
.table-card .dataTables_paginate { padding: .5rem 1rem .9rem; border-top: 1px solid var(--app-line-soft); }
.dataTables_info + .dataTables_paginate { border-top: 0; }
.dataTables_wrapper .pagination { margin: 0; --bs-pagination-border-radius: .5rem; --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); }

/* Botão de ajuda dos atalhos (somente desktop) */
#btnAtalhos {
    position: fixed; bottom: 1.25rem; right: 1.25rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: #fff; border: 1px solid var(--app-line); color: var(--app-muted); font-size: .85rem; font-weight: 700;
    box-shadow: var(--app-shadow); z-index: 1010; cursor: pointer;
}
#btnAtalhos:hover { color: var(--app-primary); border-color: #bfd0fb; }

/* Navegação inferior e botão flutuante (somente mobile) */
.bottom-nav, .fab { display: none; }

/* --------------------------------------------------------------------------
   Mobile / tablet (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); width: min(84vw, 300px); box-shadow: none; }
    .sidebar.sidebar-open { transform: translateX(0); box-shadow: var(--app-shadow-lg); }
    .main-content { margin-left: 0 !important; }
    .topbar { padding: 0 .75rem; height: 56px; }
    .content-area { padding: 1rem .9rem calc(var(--bottomnav-h) + var(--safe-bottom) + 1.25rem); }
    #btnAtalhos { display: none; }

    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        height: calc(var(--bottomnav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--app-line);
    }
    .bottom-nav a, .bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: #64748b; text-decoration: none; font-size: .68rem; font-weight: 500;
        background: none; border: 0; padding: 0; position: relative;
    }
    .bottom-nav i { font-size: 1.3rem; line-height: 1; }
    .bottom-nav .active { color: var(--app-primary); }
    .bottom-nav .active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--app-primary); }

    .fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 1rem; bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 1rem); z-index: 1025;
        width: 56px; height: 56px; border-radius: 18px; border: 0;
        background: var(--app-primary); color: #fff; font-size: 1.6rem;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .4);
        text-decoration: none;
    }
    .fab:active { transform: scale(.95); }
    /* com o FAB visível, o botão "Novo" do cabeçalho fica redundante */
    body.has-fab .page-header [data-shortcut="novo"] { display: none; }

    .page-header { margin-bottom: 1rem; }
    .page-header h2 { font-size: 1.3rem; }
    .page-header > span.text-muted { display: none; }  /* data/hora no dashboard */
    .breadcrumb-item.active { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .form-card { padding: 1.1rem; }
    /* iOS não dá zoom em campos com fonte >= 16px */
    .form-control, .form-select, .dataTables_filter input { font-size: 16px !important; }
    .btn { padding-top: .5rem; padding-bottom: .5rem; }

    /* Botões Salvar/Cancelar fixos acima da navegação inferior */
    form > .d-flex:has(> button[type="submit"]) {
        position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
        z-index: 1015; margin: 1rem -.9rem 0 !important;
        padding: .75rem .9rem; background: rgba(244, 246, 251, .95);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--app-line);
    }
    form > .d-flex:has(> button[type="submit"]) > * { flex: 1; }
    form > .d-flex:has(> button[type="submit"]) > button[type="submit"] { order: 2; }

    .modal-dialog { margin: auto .75rem; min-height: calc(100% - 1.5rem); display: flex; align-items: center; }
    .modal-dialog > .modal-content { width: 100%; }
}

/* --------------------------------------------------------------------------
   Celular (< 768px): tabelas viram cards
   As células recebem data-label (texto do cabeçalho) via app.js.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-card .table.m-cards thead { display: none; }
    .table-card .table.m-cards, .table-card .table.m-cards tbody { display: block; width: 100% !important; }
    .table-card .table.m-cards tbody tr { display: block; padding: .85rem 1rem; border-bottom: 1px solid var(--app-line); }
    .table-card .table.m-cards tbody tr:last-child { border-bottom: 0; }
    .table-card .table.m-cards tbody tr:hover { background: transparent; }
    .table-card .table.m-cards tbody td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
        padding: .2rem 0; border: 0; text-align: right; font-size: .85rem; min-height: 0;
    }
    .table-card .table.m-cards tbody td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        color: var(--app-muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    }
    .table-card .table.m-cards tbody td:not([data-label])::before,
    .table-card .table.m-cards tbody td[data-label=""]::before { content: none; }
    .table-card .table.m-cards tbody td.m-title { display: block; text-align: left; font-size: .95rem; padding: 0 0 .4rem; }
    .table-card .table.m-cards tbody td.m-title::before { content: none; }
    .table-card .table.m-cards tbody td.m-title a,
    .table-card .table.m-cards tbody td.m-title > strong { font-weight: 600 !important; color: var(--app-text) !important; }
    .table-card .table.m-cards tbody td.m-hide { display: none; }
    .table-card .table.m-cards tbody td.m-actions { justify-content: flex-end; padding-top: .6rem; }
    .table-card .table.m-cards tbody td.m-actions::before { content: none; }
    .table-card .table.m-cards tbody td.m-actions .btn-group .btn,
    .table-card .table.m-cards tbody td.m-actions > .btn { padding: .4rem .8rem; font-size: .9rem; }
    .table-card .table.m-cards tbody td[colspan] { display: block; text-align: center; }
    .table-card .table.m-cards tbody td[colspan]::before { content: none; }
    .table-card .table.m-cards tbody td.text-center { text-align: right !important; }

    /* DataTables no celular: só busca + paginação */
    .table-card .dataTables_wrapper > .row { margin: 0; }
    .table-card .dataTables_wrapper > .row > [class*="col-"] { padding: 0; }
    .table-card .dataTables_length { display: none; }
    .table-card .dataTables_filter { padding: .75rem; text-align: left !important; }
    .table-card .dataTables_filter label { display: block; font-size: 0; }
    .table-card .dataTables_filter input { width: 100% !important; min-width: 0; margin: 0 !important; padding: .55rem .85rem .55rem 2.3rem; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat .8rem center; }
    .table-card .dataTables_info { text-align: center; padding: .6rem .75rem .25rem; }
    .table-card .dataTables_paginate { padding: .25rem .75rem .9rem; }
    .table-card .dataTables_paginate .pagination { justify-content: center !important; flex-wrap: wrap; }

    /* Tabelas que não viram cards (relatórios, ficha): rolagem interna */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Dashboard: 2 cards por linha, o card inteiro é clicável (stretched-link) */
    .stat-card .card-body { flex-direction: column; align-items: flex-start !important; gap: .6rem !important; padding: .9rem !important; }
    .stat-card .card-body > .rounded-3 { padding: .55rem .65rem !important; }
    .stat-card .card-body > .rounded-3 i { font-size: 1.15rem !important; }
    .stat-card .fs-3 { font-size: 1.45rem !important; line-height: 1.1; }
    .stat-card .card-footer { padding: 0 !important; }
    .stat-card .card-footer a { font-size: 0; }
}

/* --------------------------------------------------------------------------
   Telas de autenticação
   -------------------------------------------------------------------------- */
.auth-body {
    min-height: 100vh; min-height: 100dvh; margin: 0;
    display: flex; align-items: stretch;
    background: var(--app-bg);
}
.auth-hero {
    flex: 1 1 50%; display: none; position: relative; overflow: hidden;
    background: radial-gradient(circle at 20% 20%, #3b82f6 0%, transparent 45%), radial-gradient(circle at 85% 80%, #1d4ed8 0%, transparent 50%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: #fff; padding: 3rem; flex-direction: column; justify-content: space-between;
}
.auth-hero h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; max-width: 420px; }
.auth-hero p { color: rgba(255, 255, 255, .7); max-width: 400px; }
.auth-hero .hero-features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem; }
.auth-hero .hero-features li { display: flex; align-items: center; gap: .7rem; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.auth-hero .hero-features i { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; }
.auth-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.auth-logo img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.auth-logo .name { font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; line-height: 1.1; }
.auth-logo .sub { color: var(--app-muted); font-size: .8rem; }
.auth-card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .35rem; }
.auth-card .lead-sub { color: var(--app-muted); margin-bottom: 1.75rem; font-size: .95rem; }
.auth-card .form-control { padding: .7rem .9rem; font-size: 16px; }
.auth-card .input-icon .form-control { padding-left: 2.6rem; }
.auth-card .input-icon { position: relative; }
.auth-card .input-icon > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.auth-card .btn-lg { padding: .75rem; font-size: 1rem; border-radius: .7rem; }
.auth-card .toggle-pass { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #94a3b8; padding: .4rem .55rem; }
.auth-footer { color: #94a3b8; font-size: .75rem; text-align: center; margin-top: 2.5rem; }
@media (min-width: 992px) { .auth-hero { display: flex; } }

.min-w-0 { min-width: 0; }
.form-check-label { overflow-wrap: anywhere; }
.strength-bar { height: 4px; border-radius: 2px; transition: width .3s, background .3s; }
/* o sistema já tem seu próprio botão de mostrar senha */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* Ficha PUMA (pré-visualização) no celular: quebra o texto em vez de estourar a largura */
@media (max-width: 767.98px) {
    .content-area .ficha-wrapper { padding: 1rem .75rem; }
    .content-area .ficha-wrapper .ficha-table .lbl { white-space: normal; width: 42%; }
    .content-area .ficha-wrapper .ficha-table td { overflow-wrap: anywhere; font-size: .78rem; }
}
