/* ============================================================
   QUIOSQUE - CSS do telão (layout referência: destaques 2x3,
   grupos compactos estilo tablet, mensagens 40% / atalhos 60%) + Dark Mode
   ============================================================ */

/* ============================================================
   SISTEMA DE TEMA SEMÂNTICO (Light / Dark)
   Todas as cores hardcoded devem usar estas variáveis semânticas
   ============================================================ */
:root {
    /* Largura do container do painel admin (admin.php)
       Ajuste aqui: 98% = usa quase toda a tela; 90% / 80% = mais margem. */
    --admin-w: 98%;

    /* ===== CORES PRIMÁRIAS (Brand) ===== */
    --color-primary: #2AA198;
    --color-primary-hover: #1D7A73;
    --color-primary-light: rgba(42, 161, 152, .15);
    --color-primary-focus: #38BDF8;

    --color-secondary: #F59E0B;
    --color-secondary-hover: #D97706;

    --color-success: #16A34A;
    --color-success-hover: #15803D;
    --color-success-light: rgba(22, 163, 74, .15);

    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;

    --color-danger: #DC2626;
    --color-danger-hover: #B91C1C;
    --color-danger-light: #FEE2E2;

    --color-info: #38BDF8;
    --color-info-hover: #0EA5E9;

    /* ===== CORES DE FUNDO (Semânticas) ===== */
    --bg-page: linear-gradient(to bottom right, #F8FAFC, #F1F5F9 55%, #FFF7ED);
    --bg-page-dark: linear-gradient(to bottom right, #090D16, #0F172A 55%, #0B132B);

    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FAFC;
    --bg-card-dark: #131C31;
    --bg-card-hover-dark: #1E293B;

    --bg-panel: rgba(255, 255, 255, .8);
    --bg-panel-dark: rgba(19, 28, 49, .6);

    --bg-input: #FFFFFF;
    --bg-input-dark: #1E293B;
    --bg-input-hover: #F8FAFC;
    --bg-input-hover-dark: #334155;

    --bg-header: linear-gradient(90deg, #0F182B 0%, #09577F 100%);
    --bg-header-dark: linear-gradient(90deg, #060A12 0%, #0B2538 100%);

    --bg-page-main: linear-gradient(to bottom right, #F8FAFC, #F1F5F9 55%, #FFF7ED);
    --bg-page-main-dark: linear-gradient(to bottom right, #090D16, #0F172A 55%, #0B132B);

    /* ===== CORES DE BORDA ===== */
    --border-card: #CBD5E1;
    --border-card-dark: #1E293B;
    --border-input: #CBD5E1;
    --border-input-dark: #334155;
    --border-input-focus: #38BDF8;
    --border-panel: #CBD5E1;
    --border-panel-dark: #1E293B;
    --border-dropdown: #CBD5E1;
    --border-dropdown-dark: #1E293B;

    /* ===== CORES DE TEXTO ===== */
    --text-title: #020617;
    --text-title-dark: #F8FAFC;

    --text-body: #1E293B;
    --text-body-dark: #E2E8F0;

    --text-muted: #475569;
    --text-muted-dark: #94A3B8;

    --text-subtitle: #334155;
    --text-subtitle-dark: #94A3B8;

    --text-link: #2AA198;
    --text-link-dark: #38BDF8;
    --text-link-hover: #1D7A73;
    --text-link-hover-dark: #0EA5E9;

    --text-placeholder: #94A3B8;
    --text-placeholder-dark: #64748B;

    --text-on-primary: #FFFFFF;
    --text-on-dark: #FFFFFF;

    /* ===== CORES DE ESTADO (Feedback) ===== */
    --state-success: #16A34A;
    --state-success-bg: #DCFCE7;
    --state-success-border: #86EFAC;
    --state-success-bg-dark: #14532D;
    --state-success-border-dark: #166534;

    --state-warning: #F59E0B;
    --state-warning-bg: #FEF3C7;
    --state-warning-border: #FCD34D;
    --state-warning-bg-dark: #78350F;
    --state-warning-border-dark: #F59E0B;

    --state-danger: #DC2626;
    --state-danger-bg: #FEE2E2;
    --state-danger-border: #FCA5A5;
    --state-danger-bg-dark: #7F1D1D;
    --state-danger-border-dark: #DC2626;

    --state-info: #38BDF8;
    --state-info-bg: #E0F2FE;
    --state-info-border: #BAE6FD;
    --state-info-bg-dark: #0C4A6E;
    --state-info-border-dark: #38BDF8;

    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .08);
    --shadow-sm-dark: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, .1);
    --shadow-md-dark: 0 4px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, .1);
    --shadow-lg-dark: 0 10px 15px rgba(0, 0, 0, .3);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, .1);
    --shadow-xl-dark: 0 20px 25px rgba(0, 0, 0, .4);

    /* ===== INPUTS / FORMULÁRIOS ===== */
    --input-bg: #FFFFFF;
    --input-bg-dark: #1E293B;
    --input-border: #CBD5E1;
    --input-border-dark: #334155;
    --input-border-hover: #94A3B8;
    --input-border-hover-dark: #475569;
    --input-border-focus: #38BDF8;
    --input-text: #020617;
    --input-text-dark: #F8FAFC;
    --input-placeholder: #94A3B8;
    --input-placeholder-dark: #64748B;
    --input-disabled-bg: #F1F5F9;
    --input-disabled-bg-dark: #0F172A;
    --input-disabled-text: #94A3B8;
    --input-disabled-text-dark: #64748B;

    /* ===== BOTÕES ===== */
    --btn-primary-bg: #2AA198;
    --btn-primary-hover: #1D7A73;
    --btn-primary-text: #FFFFFF;

    --btn-secondary-bg: #F1F5F9;
    --btn-secondary-hover: #E2E8F0;
    --btn-secondary-text: #1E293B;
    --btn-secondary-bg-dark: #334155;
    --btn-secondary-hover-dark: #475569;
    --btn-secondary-text-dark: #F8FAFC;

    --btn-danger-bg: #DC2626;
    --btn-danger-hover: #B91C1C;
    --btn-danger-text: #FFFFFF;

    --btn-success-bg: #16A34A;
    --btn-success-hover: #15803D;
    --btn-success-text: #FFFFFF;

    --btn-ghost-bg: transparent;
    --btn-ghost-hover: #F1F5F9;
    --btn-ghost-text: #1E293B;
    --btn-ghost-hover-dark: #334155;
    --btn-ghost-text-dark: #F8FAFC;

    /* ===== TABELAS ===== */
    --table-header-bg: #F8FAFC;
    --table-header-bg-dark: #1E293B;
    --table-row-hover: #F8FAFC;
    --table-row-hover-dark: #1E293B;
    --table-border: #E2E8F0;
    --table-border-dark: #334155;

    /* ===== TABS / NAVEGAÇÃO ===== */
    --tab-active-bg: #E0F2FE;
    --tab-active-text: #2AA198;
    --tab-active-bg-dark: #0C4A6E;
    --tab-active-text-dark: #38BDF8;
    --tab-hover-bg: #F1F5F9;
    --tab-hover-bg-dark: #334155;
    --tab-inactive-text: #64748B;
    --tab-inactive-text-dark: #94A3B8;

    /* ===== DROPDOWNS / MENUS ===== */
    --dropdown-bg: #FFFFFF;
    --dropdown-bg-dark: #131C31;
    --dropdown-border: #CBD5E1;
    --dropdown-border-dark: #1E293B;
    --dropdown-text: #020617;
    --dropdown-text-dark: #F8FAFC;
    --dropdown-sub: #334155;
    --dropdown-sub-dark: #94A3B8;
    --dropdown-hover: #F1F5F9;
    --dropdown-hover-dark: #1E293B;

    /* ===== MODALS / LIGHTBOX / OVERLAYS ===== */
    --overlay-bg: rgba(3, 7, 18, .88);
    --overlay-bg-dark: rgba(3, 7, 18, .92);
    --modal-bg: #FFFFFF;
    --modal-bg-dark: #131C31;
    --modal-border: #CBD5E1;
    --modal-border-dark: #1E293B;

    /* ===== TOAST / NOTIFICAÇÕES ===== */
    --toast-success-bg: #DCFCE7;
    --toast-success-text: #166534;
    --toast-success-bg-dark: #14532D;
    --toast-success-text-dark: #BBF7D0;

    --toast-error-bg: #FEE2E2;
    --toast-error-text: #991B1B;
    --toast-error-bg-dark: #7F1D1D;
    --toast-error-text-dark: #FCA5A5;

    --toast-warning-bg: #FEF3C7;
    --toast-warning-text: #92400E;
    --toast-warning-bg-dark: #78350F;
    --toast-warning-text-dark: #FDE68A;

    --toast-info-bg: #E0F2FE;
    --toast-info-text: #0369A1;
    --toast-info-bg-dark: #0C4A6E;
    --toast-info-text-dark: #BAE6FD

    /* ===== SCROLLBAR ===== */
    --scrollbar-thumb: #CBD5E1;
    --scrollbar-thumb-hover: #94A3B8;
    --scrollbar-thumb-dark: #475569;
    --scrollbar-thumb-hover-dark: #64748B;
    --scrollbar-track: transparent;
    --scrollbar-track-dark: transparent

    /* ===== DRAWER / MOBILE ===== */
    --drawer-bg: var(--card-bg);
    --drawer-bg-dark: var(--card-bg-dark);
    --drawer-border: var(--card-border);
    --drawer-border-dark: var(--card-border-dark)

    /* ===== CARROSSEL ===== */
    --carousel-bg: var(--card-bg)
    --carousel-border: var(--card-border)
    --carousel-btn-bg: rgba(15, 24, 43, .55)
    --carousel-btn-bg-dark: rgba(15, 24, 43, .65)
    --carousel-btn-hover: rgba(15, 24, 43, .8)
    --carousel-btn-hover-dark: rgba(15, 24, 43, .9)

    /* ===== LIGHTBOX ===== */
    --lightbox-bg: rgba(3, 7, 18, .92)
    --lightbox-close-bg: rgba(255, 255, 255, .1)
    --lightbox-close-bg-dark: rgba(255, 255, 255, .15)
    --lightbox-close-hover: rgba(255, 255, 255, .25)

    /* ===== ALERTAS ===== */
    --alert-bg: var(--card-bg)
    --alert-bg-dark: var(--card-bg-dark)
    --alert-border: var(--card-border)
    --alert-border-dark: var(--card-border-dark)

    /* ===== HEADER / NAVEGAÇÃO ===== */
    --header-bg: linear-gradient(90deg, #0F182B 0%, #09577F 100%)
    --header-bg-dark: linear-gradient(90deg, #060A12 0%, #0B2538 100%)
    --header-border: rgba(255, 255, 255, .10)
    --header-border-dark: rgba(255, 255, 255, .08)

    /* ===== BOTÕES DE AÇÃO ===== */
    --btn-save-bg: #2AA198
    --btn-save-hover: #1D7A73
    --btn-cancel-bg: #F1F5F9
    --btn-cancel-hover: #E2E8F0
    --btn-cancel-bg-dark: #334155
    --btn-cancel-hover-dark: #475569
    --btn-cancel-text: #1E293B
    --btn-cancel-text-dark: #F8FAFC

    --btn-delete-bg: #FEE2E2
    --btn-delete-hover: #FECACA
    --btn-delete-bg-dark: #7F1D1D
    --btn-delete-hover-dark: #FECACA
    --btn-delete-text: #DC2626
    --btn-delete-text-dark: #FCA5A5

    /* ===== SCROLLBAR ===== */
    --scrollbar-thumb: #CBD5E1
    --scrollbar-thumb-hover: #94A3B8
    --scrollbar-thumb-dark: #475569
    --scrollbar-thumb-hover-dark: #64748B
    --scrollbar-track: transparent
    --scrollbar-track-dark: transparent

    /* ===== LEGACY (compatibilidade - manter para não quebrar) ===== */
    --bg-main: var(--bg-page-main)
    --text-main: var(--text-title)
    --card-bg: var(--bg-card)
    --card-border: var(--border-card)
    --card-shadow: 0 2px 8px rgba(15, 23, 42, .08)
    --panel-bg: var(--bg-panel)
    --panel-border: var(--border-panel)
    --dropdown-bg: var(--dropdown-bg)
    --dropdown-border: var(--dropdown-border)
    --dropdown-text: var(--dropdown-text)
    --dropdown-sub: var(--dropdown-sub)
    --text-subtitle: var(--text-subtitle)
    --text-muted: var(--text-muted)
    --text-title: var(--text-title)
    --text-muted: var(--text-muted)
    --card-shadow: 0 2px 8px rgba(15, 23, 42, .08)

    /* Admin width */
    --admin-w: 98%;
}

html.dark {
    /* Page backgrounds */
    --bg-page: var(--bg-page-dark)
    --bg-page-main: var(--bg-page-main-dark)

    /* Cards & Panels */
    --bg-card: var(--bg-card-dark)
    --bg-card-hover: var(--bg-card-hover-dark)
    --bg-panel: var(--bg-panel-dark)
    --bg-input: var(--bg-input-dark)
    --bg-input-hover: var(--bg-input-hover-dark)

    /* Borders */
    --border-card: var(--border-card-dark)
    --border-input: var(--border-input-dark)
    --border-panel: var(--border-panel-dark)
    --border-dropdown: var(--border-dropdown-dark)

    /* Text */
    --text-title: var(--text-title-dark)
    --text-body: var(--text-body-dark)
    --text-muted: var(--text-muted-dark)
    --text-subtitle: var(--text-subtitle-dark)
    --text-link: var(--text-link-dark)
    --text-link-hover: var(--text-link-hover-dark)
    --text-placeholder: var(--text-placeholder-dark)

    /* Inputs */
    --input-bg: var(--input-bg-dark)
    --input-bg-hover: var(--bg-input-hover-dark)
    --input-border: var(--input-border-dark)
    --input-border-hover: var(--input-border-hover-dark)
    --input-text: var(--input-text-dark)
    --input-placeholder: var(--input-placeholder-dark)
    --input-disabled-bg: var(--input-disabled-bg-dark)
    --input-disabled-text: var(--input-disabled-text-dark)

    /* Buttons */
    --btn-secondary-bg: var(--btn-secondary-bg-dark)
    --btn-secondary-hover: var(--btn-secondary-hover-dark)
    --btn-secondary-text: var(--btn-secondary-text-dark)
    --btn-secondary-hover-dark: var(--btn-secondary-hover-dark)
    --btn-secondary-text-dark: var(--btn-secondary-text-dark)
    --btn-cancel-bg: var(--btn-cancel-bg-dark)
    --btn-cancel-hover: var(--btn-cancel-hover-dark)
    --btn-cancel-text: var(--btn-cancel-text-dark)
    --btn-cancel-hover-dark: var(--btn-cancel-hover-dark)
    --btn-cancel-text-dark: var(--btn-cancel-text-dark)
    --btn-delete-bg: var(--btn-delete-bg-dark)
    --btn-delete-hover: var(--btn-delete-hover-dark)
    --btn-delete-text: var(--btn-delete-text-dark)
    --btn-delete-hover-dark: var(--btn-delete-hover-dark)
    --btn-delete-text-dark: var(--btn-delete-text-dark)
    --btn-ghost-hover: var(--btn-ghost-hover-dark)
    --btn-ghost-text: var(--btn-ghost-text-dark)

    /* Tables */
    --table-header-bg: var(--table-header-bg-dark)
    --table-row-hover: var(--table-row-hover-dark)
    --table-border: var(--table-border-dark)

    /* Tabs */
    --tab-active-bg: var(--tab-active-bg-dark)
    --tab-active-text: var(--tab-active-text-dark)
    --tab-hover-bg: var(--tab-hover-bg-dark)
    --tab-inactive-text: var(--tab-inactive-text-dark)

    /* Dropdowns */
    --dropdown-bg: var(--dropdown-bg-dark)
    --dropdown-border: var(--dropdown-border-dark)
    --dropdown-text: var(--dropdown-text-dark)
    --dropdown-sub: var(--dropdown-sub-dark)
    --dropdown-hover: var(--dropdown-hover-dark)

    /* Modals */
    --modal-bg: var(--modal-bg-dark)
    --modal-border: var(--modal-border-dark)

    /* Tabs */
    --tab-active-bg: var(--tab-active-bg-dark)
    --tab-hover-bg: var(--tab-hover-bg-dark)
    --tab-inactive-text: var(--tab-inactive-text-dark)

    /* Scrollbar */
    --scrollbar-thumb: var(--scrollbar-thumb-dark)
    --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-dark)
    --scrollbar-track: var(--scrollbar-track-dark)

    /* Cards */
    --card-bg: var(--bg-card-dark)
    --card-border: var(--border-card-dark)

    /* Shadows */
    --card-shadow: 0 4px 10px rgba(0, 0, 0, .4)

    /* Legacy compat */
    --bg-main: var(--bg-page-main-dark)
    --text-main: var(--text-title-dark)
    --card-bg: var(--bg-card-dark)
    --card-border: var(--border-card-dark)
    --card-shadow: 0 4px 10px rgba(0, 0, 0, .4)
    --panel-bg: var(--bg-panel-dark)
    --panel-border: var(--border-panel-dark)
    --dropdown-bg: var(--dropdown-bg-dark)
    --dropdown-border: var(--dropdown-border-dark)
    --dropdown-text: var(--dropdown-text-dark)
    --dropdown-sub: var(--dropdown-sub-dark)
    --text-subtitle: var(--text-subtitle-dark)
    --text-muted: var(--text-muted-dark)
    --text-title: var(--text-title-dark)
    --text-muted: var(--text-muted-dark)
    --card-shadow: 0 4px 10px rgba(0, 0, 0, .4)
    --header-bg: var(--header-bg-dark)
    --header-border: var(--header-border-dark)
    --panel-bg: var(--bg-panel-dark)
    --panel-border: var(--border-panel-dark)
}

/* ============================================================
   SEMANTIC UTILITY CLASSES (usam variáveis CSS semânticas)
   Substituem classes hardcoded do Tailwind dark mode
   ============================================================ */

/* Backgrounds semânticos */
.bg-surface { background-color: var(--bg-card); }
html.dark .bg-surface { background-color: var(--bg-card-dark); }

.bg-panel { background-color: var(--bg-panel); }
html.dark .bg-panel { background-color: var(--bg-panel-dark); }

.bg-input { background-color: var(--bg-input); }
html.dark .bg-input { background-color: var(--bg-input-dark); }

.bg-surface-hover { background-color: var(--bg-card-hover); }
html.dark .bg-surface-hover { background-color: var(--bg-card-hover-dark); }

/* Borders semânticas */
.border-surface { border-color: var(--border-card); }
html.dark .border-surface { border-color: var(--border-card-dark); }

.border-input { border-color: var(--border-input); }
html.dark .border-input { border-color: var(--border-input-dark); }

.border-panel { border-color: var(--border-panel); }
html.dark .border-panel { border-color: var(--border-panel-dark); }

/* Text colors semânticas */
.text-title { color: var(--text-title); }
html.dark .text-title { color: var(--text-title-dark); }

.text-body { color: var(--text-body); }
html.dark .text-body { color: var(--text-body-dark); }

.text-muted { color: var(--text-muted); }
html.dark .text-muted { color: var(--text-muted-dark); }

.text-subtitle { color: var(--text-subtitle); }
html.dark .text-subtitle { color: var(--text-subtitle-dark); }

.text-placeholder { color: var(--text-placeholder); }
html.dark .text-placeholder { color: var(--text-placeholder-dark); }

/* Feedback colors */
.bg-success { background-color: var(--state-success-bg); }
html.dark .bg-success { background-color: var(--state-success-bg-dark); }

.border-success { border-color: var(--state-success-border); }
html.dark .border-success { border-color: var(--state-success-border-dark); }

.text-success { color: var(--state-success); }

.bg-warning { background-color: var(--state-warning-bg); }
html.dark .bg-warning { background-color: var(--state-warning-bg-dark); }

.border-warning { border-color: var(--state-warning-border); }
html.dark .border-warning { border-color: var(--state-warning-border-dark); }

.text-warning { color: var(--state-warning); }

.bg-danger { background-color: var(--state-danger-bg); }
html.dark .bg-danger { background-color: var(--state-danger-bg-dark); }

.border-danger { border-color: var(--state-danger-border); }
html.dark .border-danger { border-color: var(--state-danger-border-dark); }

.text-danger { color: var(--state-danger); }

.bg-info { background-color: var(--state-info-bg); }
html.dark .bg-info { background-color: var(--state-info-bg-dark); }

.border-info { border-color: var(--state-info-border); }
html.dark .border-info { border-color: var(--state-info-border-dark); }

.text-info { color: var(--state-info); }

/* Buttons semânticos */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.btn-primary:hover { background-color: var(--btn-primary-hover); }

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}
html.dark .btn-secondary {
    background-color: var(--btn-secondary-bg-dark);
    color: var(--btn-secondary-text-dark);
}
.btn-secondary:hover { background-color: var(--btn-secondary-hover); }
html.dark .btn-secondary:hover { background-color: var(--btn-secondary-hover-dark); }

.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}
.btn-danger:hover { background-color: var(--btn-danger-hover); }
html.dark .btn-danger:hover { background-color: var(--btn-danger-hover-dark); }

.btn-success {
    background-color: var(--btn-success-bg);
    color: var(--btn-success-text);
}
.btn-success:hover { background-color: var(--btn-success-hover); }

.btn-ghost {
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);
}
html.dark .btn-ghost {
    color: var(--btn-ghost-text-dark);
}
.btn-ghost:hover { background-color: var(--btn-ghost-hover); }
html.dark .btn-ghost:hover { background-color: var(--btn-ghost-hover-dark); }

.btn-cancel {
    background-color: var(--btn-cancel-bg);
    color: var(--btn-cancel-text);
}
html.dark .btn-cancel {
    background-color: var(--btn-cancel-bg-dark);
    color: var(--btn-cancel-text-dark);
}
.btn-cancel:hover { background-color: var(--btn-cancel-hover); }
html.dark .btn-cancel:hover { background-color: var(--btn-cancel-hover-dark); }

.btn-delete {
    background-color: var(--btn-delete-bg);
    color: var(--btn-delete-text);
}
html.dark .btn-delete {
    background-color: var(--btn-delete-bg-dark);
    color: var(--btn-delete-text-dark);
}
.btn-delete:hover { background-color: var(--btn-delete-hover); }
html.dark .btn-delete:hover { background-color: var(--btn-delete-hover-dark); }

/* Tabs semânticas */
.tab-active {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-text);
}
html.dark .tab-active {
    background-color: var(--tab-active-bg-dark);
    color: var(--tab-active-text-dark);
}

.tab-inactive {
    color: var(--tab-inactive-text);
}
html.dark .tab-inactive { color: var(--tab-inactive-text-dark); }

.tab-hover:hover {
    background-color: var(--tab-hover-bg);
}
html.dark .tab-hover:hover { background-color: var(--tab-hover-bg-dark); }

/* Dropdowns semânticos */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}
html.dark .dropdown-menu {
    background-color: var(--dropdown-bg-dark);
    border-color: var(--dropdown-border-dark);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover);
}
html.dark .dropdown-item:hover { background-color: var(--dropdown-hover-dark); }

/* Cards semânticos */
.card-surface {
    background-color: var(--bg-card);
    border-color: var(--border-card);
    box-shadow: var(--card-shadow);
}
html.dark .card-surface {
    background-color: var(--bg-card-dark);
    border-color: var(--border-card-dark);
    box-shadow: var(--card-shadow-dark);
}

.card-panel {
    background-color: var(--bg-panel);
    border-color: var(--border-panel);
}
html.dark .card-panel {
    background-color: var(--bg-panel-dark);
    border-color: var(--border-panel-dark);
}

/* Inputs semânticos */
.input-surface {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
html.dark .input-surface {
    background-color: var(--input-bg-dark);
    border-color: var(--input-border-dark);
    color: var(--input-text-dark);
}

.input-surface:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
}

.input-surface::placeholder {
    color: var(--text-placeholder);
}
html.dark .input-surface::placeholder {
    color: var(--text-placeholder-dark);
}

/* Tables semânticas */
.table-header {
    background-color: var(--table-header-bg);
}
html.dark .table-header { background-color: var(--table-header-bg-dark); }

.table-row:hover {
    background-color: var(--table-row-hover);
}
html.dark .table-row:hover { background-color: var(--table-row-hover-dark); }

.table-border {
    border-color: var(--table-border);
}
html.dark .table-border { border-color: var(--table-border-dark); }

/* Tabs semânticas */
.tab-active {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-text);
}
html.dark .tab-active {
    background-color: var(--tab-active-bg-dark);
    color: var(--tab-active-text-dark);
}

.tab-inactive {
    color: var(--tab-inactive-text);
}
html.dark .tab-inactive { color: var(--tab-inactive-text-dark); }

/* Dropdowns */
.dropdown-bg {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}
html.dark .dropdown-bg {
    background-color: var(--dropdown-bg-dark);
    border-color: var(--dropdown-border-dark);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover);
}
html.dark .dropdown-item:hover { background-color: var(--dropdown-hover-dark); }

/* Scrollbar */
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); }
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
html.dark ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-dark); }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-dark); }
::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
html.dark ::-webkit-scrollbar-track { background-color: var(--scrollbar-track-dark); }

/* Dropdowns */
.dropdown-bg { background-color: var(--dropdown-bg); border-color: var(--dropdown-border); }
html.dark .dropdown-bg { background-color: var(--dropdown-bg-dark); border-color: var(--dropdown-border-dark); }
.dropdown-text { color: var(--dropdown-text); }
html.dark .dropdown-text { color: var(--dropdown-text-dark); }
.dropdown-sub { color: var(--dropdown-sub); }
html.dark .dropdown-sub { color: var(--dropdown-sub-dark); }
.dropdown-hover { background-color: var(--dropdown-hover); }
html.dark .dropdown-hover { background-color: var(--dropdown-hover-dark); }

/* Modal/Lightbox */
.modal-bg { background-color: var(--modal-bg); border-color: var(--modal-border); }
html.dark .modal-bg { background-color: var(--modal-bg-dark); border-color: var(--modal-border-dark); }

/* Toasts/Notificações */
.toast-success { background-color: var(--toast-success-bg); color: var(--toast-success-text); }
html.dark .toast-success { background-color: var(--toast-success-bg-dark); color: var(--toast-success-text-dark); }
.toast-error { background-color: var(--toast-error-bg); color: var(--toast-error-text); }
html.dark .toast-error { background-color: var(--toast-error-bg-dark); color: var(--toast-error-text-dark); }
.toast-warning { background-color: var(--toast-warning-bg); color: var(--toast-warning-text); }
html.dark .toast-warning { background-color: var(--toast-warning-bg-dark); color: var(--toast-warning-text-dark); }
.toast-info { background-color: var(--toast-info-bg); color: var(--toast-info-text); }
html.dark .toast-info { background-color: var(--toast-info-bg-dark); color: var(--toast-info-text-dark); }

/* Scrollbar */
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); }
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
html.dark ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-dark); }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-dark); }
::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
html.dark ::-webkit-scrollbar-track { background-color: var(--scrollbar-track-dark); }

/* ============================================================
   TAILWIND DARK MODE COMPATIBILITY
   Mapeia classes dark: do Tailwind para variáveis semânticas
   ============================================================ */

html.dark .dark\:bg-white { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-slate-50 { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:bg-slate-100 { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:bg-slate-200 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-slate-300 { background-color: var(--border-input-dark); }
html.dark .dark\:bg-slate-400 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-slate-500 { background-color: var(--text-muted-dark); }
html.dark .dark\:bg-slate-600 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-slate-700 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-slate-800 { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-slate-900 { background-color: var(--bg-page-main-dark); }
html.dark .dark\:bg-slate-950 { background-color: var(--bg-page-main-dark); }

html.dark .dark\:bg-gray-50 { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:bg-gray-100 { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:bg-gray-200 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-gray-300 { background-color: var(--border-input-dark); }
html.dark .dark\:bg-gray-400 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-gray-500 { background-color: var(--text-muted-dark); }
html.dark .dark\:bg-gray-600 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-gray-700 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-gray-800 { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-gray-900 { background-color: var(--bg-page-main-dark); }

html.dark .dark\:bg-zinc-50 { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:bg-zinc-100 { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:bg-zinc-200 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-zinc-300 { background-color: var(--border-input-dark); }
html.dark .dark\:bg-zinc-400 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-zinc-500 { background-color: var(--text-muted-dark); }
html.dark .dark\:bg-zinc-600 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-zinc-700 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-zinc-800 { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-zinc-900 { background-color: var(--bg-page-main-dark); }

html.dark .dark\:bg-neutral-50 { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:bg-neutral-100 { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:bg-neutral-200 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-neutral-300 { background-color: var(--border-input-dark); }
html.dark .dark\:bg-neutral-400 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-neutral-500 { background-color: var(--text-muted-dark); }
html.dark .dark\:bg-neutral-600 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-neutral-700 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-neutral-800 { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-neutral-900 { background-color: var(--bg-page-main-dark); }

html.dark .dark\:bg-stone-50 { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:bg-stone-100 { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:bg-stone-200 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-stone-300 { background-color: var(--border-input-dark); }
html.dark .dark\:bg-stone-400 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-stone-500 { background-color: var(--text-muted-dark); }
html.dark .dark\:bg-stone-600 { background-color: var(--border-input-hover-dark); }
html.dark .dark\:bg-stone-700 { background-color: var(--bg-input-dark); }
html.dark .dark\:bg-stone-800 { background-color: var(--bg-card-dark); }
html.dark .dark\:bg-stone-900 { background-color: var(--bg-page-main-dark); }

/* Text colors */
html.dark .dark\:text-white { color: var(--text-title-dark); }
html.dark .dark\:text-slate-50 { color: var(--text-title-dark); }
html.dark .dark\:text-slate-100 { color: var(--text-title-dark); }
html.dark .dark\:text-slate-200 { color: var(--text-body-dark); }
html.dark .dark\:text-slate-300 { color: var(--text-muted-dark); }
html.dark .dark\:text-slate-400 { color: var(--text-muted-dark); }
html.dark .dark\:text-slate-500 { color: var(--text-muted-dark); }
html.dark .dark\:text-slate-600 { color: var(--text-body-dark); }
html.dark .dark\:text-slate-700 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-slate-800 { color: var(--text-title-dark); }
html.dark .dark\:text-slate-900 { color: var(--text-title-dark); }
html.dark .dark\:text-slate-950 { color: var(--text-title-dark); }

html.dark .dark\:text-gray-50 { color: var(--text-title-dark); }
html.dark .dark\:text-gray-100 { color: var(--text-title-dark); }
html.dark .dark\:text-gray-200 { color: var(--text-body-dark); }
html.dark .dark\:text-gray-300 { color: var(--text-muted-dark); }
html.dark .dark\:text-gray-400 { color: var(--text-muted-dark); }
html.dark .dark\:text-gray-500 { color: var(--text-muted-dark); }
html.dark .dark\:text-gray-600 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-gray-700 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-gray-800 { color: var(--text-title-dark); }
html.dark .dark\:text-gray-900 { color: var(--text-title-dark); }

html.dark .dark\:text-zinc-50 { color: var(--text-title-dark); }
html.dark .dark\:text-zinc-100 { color: var(--text-title-dark); }
html.dark .dark\:text-zinc-200 { color: var(--text-body-dark); }
html.dark .dark\:text-zinc-300 { color: var(--text-muted-dark); }
html.dark .dark\:text-zinc-400 { color: var(--text-muted-dark); }
html.dark .dark\:text-zinc-500 { color: var(--text-muted-dark); }
html.dark .dark\:text-zinc-600 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-zinc-700 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-zinc-800 { color: var(--text-title-dark); }
html.dark .dark\:text-zinc-900 { color: var(--text-title-dark); }

html.dark .dark\:text-neutral-50 { color: var(--text-title-dark); }
html.dark .dark\:text-neutral-100 { color: var(--text-title-dark); }
html.dark .dark\:text-neutral-200 { color: var(--text-body-dark); }
html.dark .dark\:text-neutral-300 { color: var(--text-muted-dark); }
html.dark .dark\:text-neutral-400 { color: var(--text-muted-dark); }
html.dark .dark\:text-neutral-500 { color: var(--text-muted-dark); }
html.dark .dark\:text-neutral-600 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-neutral-700 { color: var(--text-subtitle-dark); }
html.dark .dark\:text-neutral-800 { color: var(--text-title-dark); }
html.dark .dark\:text-neutral-900 { color: var(--text-title-dark); }

/* Border colors */
html.dark .dark\:border-white { border-color: var(--border-card-dark); }
html.dark .dark\:border-slate-50 { border-color: var(--border-card-dark); }
html.dark .dark\:border-slate-100 { border-color: var(--border-input-dark); }
html.dark .dark\:border-slate-200 { border-color: var(--border-input-dark); }
html.dark .dark\:border-slate-300 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-slate-400 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-slate-500 { border-color: var(--text-muted-dark); }
html.dark .dark\:border-slate-600 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-slate-700 { border-color: var(--border-input-dark); }
html.dark .dark\:border-slate-800 { border-color: var(--border-card-dark); }
html.dark .dark\:border-slate-900 { border-color: var(--border-card-dark); }

html.dark .dark\:border-gray-50 { border-color: var(--border-card-dark); }
html.dark .dark\:border-gray-100 { border-color: var(--border-input-dark); }
html.dark .dark\:border-gray-200 { border-color: var(--border-input-dark); }
html.dark .dark\:border-gray-300 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-gray-400 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-gray-500 { border-color: var(--text-muted-dark); }
html.dark .dark\:border-gray-600 { border-color: var(--border-input-hover-dark); }
html.dark .dark\:border-gray-700 { border-color: var(--border-input-dark); }
html.dark .dark\:border-gray-800 { border-color: var(--border-card-dark); }
html.dark .dark\:border-gray-900 { border-color: var(--border-card-dark); }

/* Focus rings */
html.dark .dark\:focus\:ring-blue-500 { --tw-ring-color: var(--color-primary-focus); }
html.dark .dark\:focus\:ring-red-500 { --tw-ring-color: var(--color-danger); }
html.dark .dark\:focus\:ring-green-500 { --tw-ring-color: var(--color-success); }
html.dark .dark\:focus\:ring-amber-500 { --tw-ring-color: var(--color-warning); }

/* Hover states */
html.dark .dark\:hover\:bg-slate-50:hover { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:hover\:bg-slate-100:hover { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:hover\:bg-slate-200:hover { background-color: var(--bg-input-dark); }
html.dark .dark\:hover\:bg-slate-700:hover { background-color: var(--bg-input-dark); }
html.dark .dark\:hover\:bg-slate-800:hover { background-color: var(--bg-card-dark); }
html.dark .dark\:hover\:bg-gray-50:hover { background-color: var(--bg-card-hover-dark); }
html.dark .dark\:hover\:bg-gray-100:hover { background-color: var(--bg-surface-hover-dark); }
html.dark .dark\:hover\:bg-gray-700:hover { background-color: var(--bg-input-dark); }
html.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--bg-card-dark); }
html.dark .dark\:hover\:bg-blue-50:hover { background-color: var(--color-primary-light); }
html.dark .dark\:hover\:bg-blue-100:hover { background-color: var(--color-primary-light); }
html.dark .dark\:hover\:bg-red-50:hover { background-color: var(--state-danger-bg-dark); }
html.dark .dark\:hover\:bg-red-100:hover { background-color: var(--state-danger-bg-dark); }
html.dark .dark\:hover\:bg-green-50:hover { background-color: var(--state-success-bg-dark); }
html.dark .dark\:hover\:bg-green-100:hover { background-color: var(--state-success-bg-dark); }
html.dark .dark\:hover\:bg-amber-50:hover { background-color: var(--state-warning-bg-dark); }
html.dark .dark\:hover\:bg-amber-100:hover { background-color: var(--state-warning-bg-dark); }

/* Text hover */
html.dark .dark\:hover\:text-slate-900:hover { color: var(--text-title-dark); }
html.dark .dark\:hover\:text-slate-700:hover { color: var(--text-subtitle-dark); }
html.dark .dark\:hover\:text-blue-600:hover { color: var(--color-primary-hover); }
html.dark .dark\:hover\:text-red-600:hover { color: var(--color-danger-hover); }
html.dark .dark\:hover\:text-green-600:hover { color: var(--color-success-hover); }

/* Placeholder */
html.dark .dark\:placeholder\:text-slate-400::placeholder { color: var(--text-placeholder-dark); }
html.dark .dark\:placeholder\:text-slate-500::placeholder { color: var(--text-placeholder-dark); }

/* ============================================================
   FIM DO MAPEAMENTO TAILWIND DARK MODE
   ============================================================ */