/* *****************************************************

    ** WS Chat - Identidade Visual **

    Template customizado com a identidade visual
    do WS Chat (app.wschat.com.br)

    Cores Principais:
    - Primária (Azul): #3b82f6
    - Secundária (Roxo): #a855f7
    - Sucesso (Verde): #22c55e
    - Destaque (Pink): #ec4899
    - Texto: #1f2937
    - Background: #f9fafb

***************************************************** */

/* ===========================================
   IMPORTAÇÃO DA FONTE INTER
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===========================================
   RESET DE FONTES
   =========================================== */
body,
input,
button,
select,
textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1f2937;
}

/* ===========================================
   CORES DE FUNDO GERAIS
   =========================================== */
body {
    background-color: #f9fafb;
}

section#main-body {
    background-color: #ffffff;
}

section#footer {
    background-color: #f3f4f6;
    border-top-color: #e5e7eb;
    color: #6b7280;
}

/* ===========================================
   HEADER - TOPO DO SITE
   =========================================== */
section#header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

section#header .logo-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    color: #1f2937;
}

/* ===========================================
   TOP NAV - NAVEGAÇÃO SUPERIOR
   =========================================== */
ul.top-nav > li > a {
    color: #4b5563;
    font-weight: 500;
    transition: color 0.2s ease;
}

ul.top-nav > li:hover > a,
ul.top-nav > li:focus > a,
ul.top-nav > li:active > a {
    color: #3b82f6;
}

/* Botão principal do top-nav (Ver Carrinho/Logout) */
ul.top-nav > li.primary-action > a.btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
}

ul.top-nav > li.primary-action > a.btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

ul.top-nav > li.primary-action {
    border-left-color: #e5e7eb;
}

/* ===========================================
   NAVBAR PRINCIPAL - MENU DE NAVEGAÇÃO
   =========================================== */
.navbar-main {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.navbar-main li.account {
    background-color: #1e3a8a;
}

.navbar-main .navbar-nav > li > a {
    color: #ffffff;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #1e3a8a;
}

/* Dropdown menu */
.navbar-main .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}

.navbar-main .dropdown-menu > li > a {
    color: #374151;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .active > a {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Mobile navbar */
@media (max-width: 767px) {
    .navbar-main .navbar-nav .open .dropdown-menu > li > a {
        color: #e0e7ff;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #ffffff;
        background-color: #1e3a8a;
    }
}

.navbar-main .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

/* ===========================================
   HOME BANNER - BANNER PRINCIPAL
   =========================================== */
section#home-banner {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #a855f7 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho no banner */
section#home-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}

section#home-banner h2 {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section#home-banner .tooltip-inner {
    background-color: #a855f7;
}

section#home-banner .tooltip.left .tooltip-arrow {
    border-left-color: #a855f7;
}
section#home-banner .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #a855f7;
}
section#home-banner .tooltip.right .tooltip-arrow {
    border-right-color: #a855f7;
}

section#home-banner .form-control {
    border-radius: 8px 0 0 8px;
    border: 2px solid transparent;
    font-weight: 500;
    color: #1f2937;
}

section#home-banner .form-control:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* Botão de busca (verde) */
section#home-banner .btn.search {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 0;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
    transition: all 0.2s ease;
}

section#home-banner .btn.search:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4);
}

/* Botão de transferir */
section#home-banner .btn.transfer {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border-radius: 0 8px 8px 0;
    font-weight: 600;
}

section#home-banner .btn.transfer:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}

/* ===========================================
   HOME SHORTCUTS - ATALHOS DA HOME
   =========================================== */
.home-shortcuts {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.home-shortcuts li {
    border-right-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease;
}

.home-shortcuts li:first-child {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.home-shortcuts li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.home-shortcuts li a {
    color: #ffffff;
}

.home-shortcuts li a i {
    color: #ffffff;
}

.home-shortcuts li a p {
    color: #ffffff;
}

.home-shortcuts .lead {
    color: #e0e7ff;
}

/* ===========================================
   LINKS
   =========================================== */
a {
    color: #2563eb;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #1d4ed8;
    text-decoration: none;
}

/* ===========================================
   TÍTULOS E HEADERS
   =========================================== */
div.header-lined h1 {
    color: #1e40af;
    border-bottom-color: #e5e7eb;
}

div.header-lined .breadcrumb li a {
    color: #6b7280;
}

div.header-lined .breadcrumb > .active {
    color: #3b82f6;
}

/* ===========================================
   BOTÕES
   =========================================== */

/* Botão Primário */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

/* Botão Default */
.btn-default {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Botão Success */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4);
}

/* Botão Info */
.btn-info {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}

.btn-info:hover,
.btn-info:focus {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.4);
}

/* Botão Warning */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
}

.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Botão Danger */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
}

.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* ===========================================
   PAINÉIS E CARDS
   =========================================== */
.panel {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.panel-default > .panel-heading {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
    border-radius: 12px 12px 0 0;
    color: #1f2937;
    font-weight: 600;
}

.panel-primary > .panel-heading {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px 12px 0 0;
}

.panel-success > .panel-heading {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 12px 12px 0 0;
}

.panel-info > .panel-heading {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border: none;
    border-radius: 12px 12px 0 0;
    color: #ffffff;
}

.panel-warning > .panel-heading {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 12px 12px 0 0;
    color: #ffffff;
}

.panel-danger > .panel-heading {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 12px 12px 0 0;
}

/* ===========================================
   ALERTAS
   =========================================== */
.alert {
    border-radius: 8px;
    border: none;
    font-weight: 500;
}

.alert-success {
    background-color: #dcfce7;
    color: #166534;
}

.alert-info {
    background-color: #ede9fe;
    color: #5b21b6;
}

.alert-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ===========================================
   FORMULÁRIOS
   =========================================== */
.form-control {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #1f2937;
    font-weight: 500;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-control::placeholder {
    color: #9ca3af;
}

/* ===========================================
   TABELAS
   =========================================== */
.table > thead > tr > th {
    background-color: #f9fafb;
    color: #374151;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

.table > tbody > tr > td {
    border-color: #f3f4f6;
    color: #4b5563;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9fafb;
}

.table-hover > tbody > tr:hover {
    background-color: #eff6ff;
}

/* ===========================================
   PAGINAÇÃO
   =========================================== */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: #ffffff;
}

.pagination > li > a,
.pagination > li > span {
    color: #3b82f6;
    border-color: #e5e7eb;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* ===========================================
   LIST GROUP
   =========================================== */
.list-group-item {
    border-color: #f3f4f6;
    color: #374151;
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #eff6ff;
    color: #1e40af;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: #ffffff;
}

/* ===========================================
   BADGES E LABELS
   =========================================== */
.label {
    border-radius: 6px;
    font-weight: 600;
    padding: 4px 8px;
}

.label-primary {
    background-color: #3b82f6;
}

.label-success {
    background-color: #22c55e;
}

.label-info {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.label-warning {
    background-color: #f59e0b;
}

.label-danger {
    background-color: #ef4444;
}

.badge {
    border-radius: 9999px;
    font-weight: 600;
    background-color: #3b82f6;
}

/* ===========================================
   SIDEBAR
   =========================================== */
.sidebar .panel-heading,
.sidebar .panel-default > .panel-heading,
.sidebar .panel > .panel-heading {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    border: none;
}

/* Texto do título da sidebar */
.sidebar .panel-heading .panel-title,
.sidebar .panel-heading a,
.sidebar .panel-heading span,
.sidebar .panel-heading .title,
.sidebar .panel-title,
.sidebar .panel-title a {
    color: #ffffff !important;
}

/* Ícones na sidebar header */
.sidebar .panel-heading i,
.sidebar .panel-heading .fa,
.sidebar .panel-heading .fas,
.sidebar .panel-heading .far,
.sidebar .panel-heading .fab,
.sidebar .panel-heading svg {
    color: #ffffff !important;
}

/* Seta/caret do collapse */
.sidebar .panel-heading .caret,
.sidebar .panel-heading .glyphicon,
.sidebar .panel-heading [class*="chevron"],
.sidebar .panel-heading .arrow {
    color: #ffffff !important;
    border-top-color: #ffffff !important;
}

/* Item ativo da sidebar */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.sidebar .list-group-item.active i,
.sidebar .list-group-item.active .fa,
.sidebar .list-group-item.active .fas,
.sidebar .list-group-item.active .far {
    color: #ffffff !important;
}

/* Itens normais da sidebar */
.sidebar .list-group-item {
    color: #374151;
    border-color: #f3f4f6;
}

.sidebar .list-group-item:hover {
    background-color: #eff6ff;
    color: #1e40af;
}

.sidebar .list-group-item i,
.sidebar .list-group-item .fa,
.sidebar .list-group-item .fas,
.sidebar .list-group-item .far {
    color: #6b7280;
}

.sidebar .list-group-item:hover i,
.sidebar .list-group-item:hover .fa {
    color: #3b82f6;
}

/* ===========================================
   CARDS DE SERVIÇO / PRODUTO
   =========================================== */
.product-card,
.service-card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.product-card:hover,
.service-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ===========================================
   ÍCONES
   =========================================== */
.fa-primary,
.text-primary {
    color: #3b82f6 !important;
}

.fa-success,
.text-success {
    color: #22c55e !important;
}

.fa-info,
.text-info {
    color: #a855f7 !important;
}

.fa-warning,
.text-warning {
    color: #f59e0b !important;
}

.fa-danger,
.text-danger {
    color: #ef4444 !important;
}

/* ===========================================
   FOOTER
   =========================================== */
section#footer {
    background-color: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
}

section#footer a {
    color: #3b82f6;
}

section#footer a:hover {
    color: #1d4ed8;
}

section#footer .back-to-top i {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 8px;
}

/* ===========================================
   ESTADOS ESPECIAIS
   =========================================== */

/* Status Online/Ativo */
.status-active,
.status-online {
    color: #22c55e;
}

/* Status Pendente */
.status-pending {
    color: #f59e0b;
}

/* Status Inativo/Suspenso */
.status-suspended,
.status-inactive {
    color: #ef4444;
}

/* ===========================================
   TRANSIÇÕES SUAVES
   =========================================== */
.btn,
.form-control,
.panel,
.list-group-item,
a {
    transition: all 0.2s ease;
}

/* ===========================================
   MELHORIAS DE ACESSIBILIDADE
   =========================================== */

/* Focus visível para navegação por teclado */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Contraste garantido em links */
a:not(.btn) {
    text-decoration-color: transparent;
}

a:not(.btn):hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* ===========================================
   RESPONSIVIDADE
   =========================================== */
@media (max-width: 767px) {
    .navbar-main {
        background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);
    }

    section#home-banner {
        padding: 30px 0 40px;
    }

    section#home-banner h2 {
        font-size: 1.5rem;
    }

    .btn {
        border-radius: 6px;
    }
}

/* ===========================================
   LOADER / SPINNER
   =========================================== */
.spinner,
.loader {
    border-color: #e5e7eb;
    border-top-color: #3b82f6;
}

/* ===========================================
   PROGRESS BAR
   =========================================== */
.progress {
    border-radius: 9999px;
    background-color: #e5e7eb;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.progress-bar-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.progress-bar-info {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.progress-bar-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* ===========================================
   MODAL
   =========================================== */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
    border-bottom: 1px solid #e5e7eb;
    border-radius: 16px 16px 0 0;
}

.modal-footer {
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
}

/* ===========================================
   TOOLTIP
   =========================================== */
.tooltip-inner {
    background-color: #1f2937;
    border-radius: 6px;
    font-weight: 500;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #1f2937;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #1f2937;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #1f2937;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #1f2937;
}

/* ===========================================
   POPOVER
   =========================================== */
.popover {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.popover-title {
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    color: #1f2937;
}

/* ===========================================
   WELL
   =========================================== */
.well {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: none;
}

/* ===========================================
   DROPDOWN NOTIFICAÇÕES
   =========================================== */
#accountNotificationsContent .client-alerts li a {
    color: #374151;
}

#accountNotificationsContent .client-alerts li a:hover {
    background-color: #eff6ff;
    color: #1e40af;
}

/* ===========================================
   TWITTER FEED
   =========================================== */
div.tweet > i {
    color: #3b82f6;
}

/* ===========================================
   DASHBOARD V2 - CARDS COLORIDOS
   =========================================== */

.dashboard-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Welcome Banner */
.welcome-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 20px;
    padding: 30px 40px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(30, 64, 175, 0.3);
}

.welcome-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.welcome-avatar {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.welcome-avatar i {
    font-size: 2.8rem;
    color: #ffffff;
}

.welcome-greeting {
    display: block;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 500;
}

.welcome-name {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-company {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
}

.welcome-company i {
    font-size: 0.9rem;
}

.welcome-right {
    display: flex;
    gap: 15px;
}

.btn-profile,
.btn-new-order {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-profile {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-profile:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.btn-new-order {
    background: #ffffff;
    color: #1e40af;
}

.btn-new-order:hover {
    background: #f0f9ff;
    color: #1e40af;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.stat-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.stat-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.stat-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

.stat-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

.stat-gray {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.3);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 1.8rem;
    color: #ffffff;
}

.stat-content {
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 5px;
    font-weight: 500;
}

.stat-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.stat-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffffff;
    color: #ea580c;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Quick Actions */
.quick-actions {
    margin-bottom: 30px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
}

.section-title i {
    color: #3b82f6;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px 20px;
    background: #ffffff;
    border: 2px solid #f3f4f6;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s;
}

.quick-action-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-3px);
    text-decoration: none;
}

.action-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon i {
    font-size: 1.8rem;
    color: #ffffff;
}

.action-icon-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.action-icon-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.action-icon-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.action-icon-orange { background: linear-gradient(135deg, #f97316, #ea580c); }

.action-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

/* Search Section */
.search-section {
    margin-bottom: 30px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 8px 8px 8px 20px;
    transition: all 0.2s;
}

.search-input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.search-input-wrapper i {
    color: #9ca3af;
    font-size: 1.2rem;
    margin-right: 15px;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.1rem;
    color: #1f2937;
    background: transparent;
}

.search-input-wrapper input::placeholder {
    color: #9ca3af;
}

.search-input-wrapper button {
    padding: 14px 30px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.search-input-wrapper button:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Content Panels */
.content-panels {
    margin-top: 20px;
}

.panels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.content-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #f3f4f6;
}

.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #f3f4f6;
}

.content-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-card-header h3 i {
    color: #3b82f6;
    font-size: 1.1rem;
}

.header-badge {
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 10px;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.header-action:hover {
    color: #1e40af;
    text-decoration: none;
}

.content-card-body {
    padding: 25px;
}

.content-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-list li {
    border-bottom: 1px solid #f3f4f6;
}

.content-list li:last-child {
    border-bottom: none;
}

.content-list a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s;
}

.content-list a:hover {
    background: #f8fafc;
    color: #1e40af;
    text-decoration: none;
}

.content-list a i:first-child {
    color: #9ca3af;
    width: 20px;
    text-align: center;
}

.content-list a:hover i:first-child {
    color: #3b82f6;
}

.item-label {
    flex: 1;
    font-size: 1.05rem;
}

.item-badge {
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
}

.item-arrow {
    color: #d1d5db;
    font-size: 0.9rem;
}

.content-card-footer {
    padding: 15px 25px;
    background: #f8fafc;
    border-top: 1px solid #f3f4f6;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .welcome-banner {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 25px;
    }

    .welcome-left {
        flex-direction: column;
    }

    .welcome-name {
        font-size: 1.6rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .panels-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .actions-grid {
        grid-template-columns: 1fr;
    }

    .welcome-right {
        flex-direction: column;
        width: 100%;
    }

    .btn-profile,
    .btn-new-order {
        justify-content: center;
    }
}

/* Esconder dashboard antigo */
.dashboard-business {
    display: none !important;
}

/* --- HEADER DO PERFIL --- */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 35px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.25);
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.profile-name {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #ffffff;
}

.profile-company {
    margin: 5px 0 0 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 25px;
}

.meta-item {
    text-align: right;
}

.meta-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 500;
}

.meta-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

.btn-edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #ffffff;
    color: #1e40af;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-edit-profile:hover {
    background: #f0f9ff;
    color: #1e40af;
    text-decoration: none;
    transform: translateY(-1px);
}

/* --- RESUMO DA CONTA --- */
.account-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s;
    position: relative;
}

.summary-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    text-decoration: none;
    transform: translateY(-3px);
}

.summary-card.has-pending {
    border-left: 4px solid #f59e0b;
}

.summary-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon i {
    font-size: 22px;
    color: #3b82f6;
}

.summary-data {
    flex: 1;
}

.summary-number {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1e40af;
    line-height: 1;
}

.summary-label {
    font-size: 1rem;
    color: #6b7280;
    margin-top: 6px;
    display: block;
}

.pending-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* --- AÇÕES PRINCIPAIS --- */
.main-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.action-btn:hover {
    background: #f0f9ff;
    color: #1e40af;
    border-color: #3b82f6;
    text-decoration: none;
}

.action-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* --- BUSCA --- */
.search-box {
    margin-bottom: 35px;
}

.search-box form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 20px;
    transition: all 0.2s;
}

.search-box form:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-box i {
    color: #3b82f6;
    font-size: 1.1rem;
}

.search-box input {
    flex: 1;
    border: none;
    padding: 16px 14px;
    font-size: 1.05rem;
    color: #1f2937;
    background: transparent;
    outline: none;
}

.search-box input::placeholder {
    color: #9ca3af;
}

/* --- PAINÉIS EMPRESARIAIS --- */
.business-panels {
    margin-bottom: 30px;
}

.panel-full {
    margin-bottom: 20px;
}

.panels-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.business-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.business-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.business-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.business-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.business-card .card-header h3 i {
    color: #3b82f6;
    font-size: 1.1rem;
}

.card-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.card-action:hover {
    color: #1d4ed8;
    text-decoration: none;
    gap: 10px;
}

.business-card .card-body {
    padding: 24px;
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.7;
}

.business-card .card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.business-card .card-list li {
    border-bottom: 1px solid #f3f4f6;
}

.business-card .card-list li:last-child {
    border-bottom: none;
}

.business-card .card-list a,
.business-card .card-list span {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    color: #374151;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
}

.business-card .card-list a:hover {
    background: #eff6ff;
    color: #1e40af;
    text-decoration: none;
}

.business-card .card-list i {
    color: #9ca3af;
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.business-card .card-list a:hover i {
    color: #3b82f6;
}

.list-badge {
    margin-left: auto;
    background: #eff6ff;
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.business-card .card-footer {
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

.business-card .card-footer a {
    color: #3b82f6;
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .account-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .panels-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .profile-info {
        flex-direction: column;
    }

    .profile-meta {
        flex-direction: column;
        gap: 15px;
    }

    .meta-item {
        text-align: center;
    }

    .meta-divider {
        width: 50px;
        height: 1px;
    }

    .main-actions {
        flex-wrap: wrap;
    }

    .action-btn {
        flex: 1;
        min-width: 140px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .account-summary {
        grid-template-columns: 1fr;
    }

    .action-btn {
        width: 100%;
    }
}

/* Ocultar dashboard antigo */
.dashboard-modern {
    display: none !important;
}

/* --- HEADER DE BOAS-VINDAS --- */
.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: 20px;
    color: #ffffff;
    box-shadow: 0 10px 40px rgba(30, 64, 175, 0.3);
}

.welcome-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.welcome-avatar {
    position: relative;
}

.avatar-circle {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.avatar-circle i {
    font-size: 28px;
    color: #ffffff;
}

.status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #1e40af;
}

.status-indicator.online {
    background-color: #22c55e;
}

.welcome-text h1 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

.welcome-text h1 .highlight {
    color: #fbbf24;
}

.welcome-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.welcome-actions {
    display: flex;
    gap: 12px;
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-action.primary {
    background: #ffffff;
    color: #1e40af;
}

.btn-action.primary:hover {
    background: #f0f9ff;
    color: #1e40af;
}

/* --- CARDS DE ESTATÍSTICAS --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    border-radius: 16px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    text-decoration: none;
}

.gradient-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gradient-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gradient-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 22px;
    color: #ffffff;
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
}

.stat-arrow {
    opacity: 0.5;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* --- BARRA DE PESQUISA --- */
.search-section {
    margin-bottom: 30px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.search-icon {
    padding: 0 15px;
    color: #9ca3af;
    font-size: 1.1rem;
}

.search-input {
    flex: 1;
    border: none;
    padding: 12px 10px;
    font-size: 1rem;
    color: #1f2937;
    background: transparent;
    outline: none;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-btn {
    padding: 12px 25px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
}

/* --- AÇÕES RÁPIDAS --- */
.quick-actions {
    margin-bottom: 30px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
}

.section-title i {
    color: #f59e0b;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

@media (max-width: 992px) {
    .actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 15px;
    background: #ffffff;
    border-radius: 16px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.action-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: #1f2937;
    text-decoration: none;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon i {
    font-size: 20px;
    color: #ffffff;
}

.action-icon.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.action-icon.purple {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.action-icon.green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.action-icon.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.action-icon.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.action-icon.teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* --- PAINÉIS DE CONTEÚDO --- */
.content-panels {
    margin-bottom: 30px;
}

.panels-full {
    margin-bottom: 20px;
}

.panels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .panels-grid {
        grid-template-columns: 1fr;
    }
}

.panel-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modern-panel {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.modern-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
}

.modern-panel .panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-panel .panel-title i {
    color: #3b82f6;
}

.panel-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.panel-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    transform: translateY(-1px);
}

.modern-panel .panel-content {
    padding: 20px;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

.modern-panel .panel-list {
    padding: 0;
    margin: 0;
}

.panel-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.panel-list-item:last-child {
    border-bottom: none;
}

.panel-list-item:hover {
    background-color: #f0f9ff;
    color: #1e40af;
    text-decoration: none;
}

.panel-list-item i:first-child {
    width: 20px;
    color: #6b7280;
}

.panel-list-item:hover i:first-child {
    color: #3b82f6;
}

.panel-list-item span {
    flex: 1;
}

.item-badge {
    background: #e5e7eb;
    color: #374151;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.item-arrow {
    color: #d1d5db;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.panel-list-item:hover .item-arrow {
    color: #3b82f6;
    transform: translateX(3px);
}

.panel-list-item.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.panel-list-item.active i,
.panel-list-item.active .item-arrow,
.panel-list-item.active .item-badge {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.modern-panel .panel-footer {
    padding: 15px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: right;
}

.modern-panel .panel-footer a {
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Cores específicas dos painéis */
.modern-panel.panel-blue .panel-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.modern-panel.panel-blue .panel-title i {
    color: #2563eb;
}

.modern-panel.panel-green .panel-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.modern-panel.panel-green .panel-title i {
    color: #16a34a;
}

.modern-panel.panel-red .panel-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.modern-panel.panel-red .panel-title i {
    color: #dc2626;
}

.modern-panel.panel-gold .panel-header,
.modern-panel.panel-orange .panel-header {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.modern-panel.panel-gold .panel-title i,
.modern-panel.panel-orange .panel-title i {
    color: #d97706;
}

/* --- RESPONSIVIDADE GERAL --- */
@media (max-width: 768px) {
    .dashboard-welcome {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }

    .welcome-content {
        flex-direction: column;
    }

    .welcome-text h1 {
        font-size: 1.4rem;
    }

    .welcome-actions {
        width: 100%;
        justify-content: center;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-number {
        font-size: 1.6rem;
    }
}

/* Esconder sidebar na área do cliente quando em dashboard moderno */
.dashboard-modern ~ .sidebar,
.main-content:has(.dashboard-modern) + .sidebar {
    display: none;
}

/* Ajuste para ocupar largura total */
.col-md-9.pull-md-right:has(.dashboard-modern) {
    width: 100%;
    float: none;
}

/* Ocultar tiles antigos se ainda aparecerem */
.tiles {
    display: none !important;
}

.home-kb-search {
    display: none !important;
}

/* ===========================================
   REMOVER SIDEBAR - LAYOUT FULL WIDTH
   =========================================== */

/* Esconder sidebar completamente */
.sidebar,
.col-md-3.pull-md-left.sidebar,
.col-md-3.sidebar {
    display: none !important;
}

/* Conteúdo principal ocupa 100% */
.col-md-9.pull-md-right,
.col-md-9.main-content,
.main-content {
    width: 100% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* Ajuste do container principal */
section#main-body .container {
    max-width: 1200px;
}

section#main-body .row {
    margin-left: 0;
    margin-right: 0;
}

/* Header de página sem sidebar */
.header-lined {
    margin-bottom: 25px;
}

.header-lined h1 {
    font-size: 1.8rem;
    color: #1e40af;
}

/* ===========================================
   NOVO HEADER DUAS LINHAS
   =========================================== */

.site-header {
    position: relative;
    z-index: 1000;
}

/* LINHA 1: Top bar branca */
.header-top {
    background: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #e5e7eb;
}

.header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.header-logo a {
    display: block;
}

.header-logo img {
    max-height: 55px;
    width: auto;
}

.header-logo .logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e40af;
    text-decoration: none;
}

.header-logo .logo-text:hover {
    color: #3b82f6;
    text-decoration: none;
}

/* Ações do header (linha 1) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-link {
    color: #374151;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 12px;
    transition: color 0.2s;
}

.header-link:hover {
    color: #1e40af;
    text-decoration: none;
}

.header-lang {
    color: #6b7280;
    font-size: 0.95rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-lang:hover {
    color: #1e40af;
    text-decoration: none;
}

.header-notify {
    position: relative;
    color: #6b7280;
    font-size: 1.3rem;
    padding: 8px;
    text-decoration: none;
    transition: color 0.2s;
}

.header-notify:hover {
    color: #1e40af;
    text-decoration: none;
}

.notify-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-header-cart:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-header-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-header-logout:hover {
    background: #dc2626;
    color: #ffffff;
    text-decoration: none;
}

.btn-admin {
    color: #6b7280;
    font-size: 1.3rem;
    padding: 8px;
}

.btn-admin:hover {
    color: #1e40af;
}

/* LINHA 2: Navbar com gradiente */
.header-navbar {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    padding: 0;
}

.header-nav {
    display: flex;
    justify-content: flex-start;
}

.header-nav .navbar-header {
    display: none;
}

.header-nav .navbar-collapse {
    display: block !important;
    height: auto !important;
    padding: 0;
    overflow: visible;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 22px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus,
.nav-menu > li.active > a,
.nav-menu > li.open > a {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.nav-menu > li > a .caret {
    margin-left: 3px;
    border-top-color: rgba(255, 255, 255, 0.7);
}

.nav-menu > li:hover > a .caret {
    border-top-color: #ffffff;
}

/* Dropdown do menu - Estilo Moderno */
.nav-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    padding: 15px 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
}

.nav-menu > li:hover > .dropdown-menu,
.nav-menu > li.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Item ativo quando dropdown está aberto */
.nav-menu > li:hover > a,
.nav-menu > li.open > a {
    background: rgba(255, 255, 255, 0.15) !important;
}

.nav-menu .dropdown-menu > li {
    margin: 0;
}

.nav-menu .dropdown-menu > li > a {
    display: block;
    padding: 18px 30px;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-menu .dropdown-menu > li > a:hover {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
    color: #1e40af;
    border-left-color: #3b82f6;
    padding-left: 32px;
}

.nav-menu .dropdown-menu > li > a i {
    margin-right: 10px;
    color: #6b7280;
    width: 20px;
    text-align: center;
}

.nav-menu .dropdown-menu > li > a:hover i {
    color: #3b82f6;
}

/* Esconder menus antigos */
section#header,
section#main-menu {
    display: none !important;
}

/* Responsivo - Header duas linhas */
@media (max-width: 991px) {
    .header-top-inner {
        flex-wrap: wrap;
        gap: 15px;
    }

    .header-navbar {
        position: relative;
    }

    .header-nav {
        width: 100%;
    }

    .header-nav .navbar-header {
        display: block;
        padding: 10px 0;
    }

    .header-nav .navbar-toggle {
        border: 1px solid rgba(255,255,255,0.3);
        background: rgba(255,255,255,0.1);
        margin: 0;
        padding: 10px;
        border-radius: 6px;
    }

    .header-nav .navbar-toggle .icon-bar {
        background: #ffffff;
    }

    .header-nav .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #1e40af;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        padding: 0;
    }

    .header-nav .navbar-collapse.in {
        display: block !important;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-menu > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-menu .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }

    .nav-menu .dropdown-menu > li > a {
        color: #ffffff;
        padding: 12px 30px;
    }

    .nav-menu .dropdown-menu > li > a:hover {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
    }
}

@media (max-width: 767px) {
    .header-actions {
        gap: 10px;
    }

    .btn-header-cart {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .header-link {
        font-size: 0.9rem;
        padding: 6px 8px;
    }
}

/* ===========================================
   CNPJ LOOKUP - DESIGN MODERNO COM HEADER
   =========================================== */

/* Container principal - Card com header */
#cnpj-lookup-container {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
}

/* Header do card CNPJ */
#cnpj-lookup-container::before {
    content: '🏢 Consulta Automática de CNPJ';
    display: block;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 25px;
    margin: 0;
    letter-spacing: 0.3px;
}

/* Área interna do card */
#cnpj-lookup-container > .row {
    padding: 25px !important;
    background: #f8fafc !important;
    margin: 0 !important;
}

/* Labels dentro do CNPJ lookup */
#cnpj-lookup-container label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#cnpj-lookup-container label::before {
    display: none !important;
}

#cnpj-lookup-container label i {
    color: #3b82f6 !important;
    font-size: 1rem !important;
}

/* Inputs do CNPJ lookup */
#cnpj-lookup-container input.form-control,
#cnpj-lookup-container select.form-control,
#inputCNPJ,
#selectQSA,
#inputEmailCNPJ {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#cnpj-lookup-container input.form-control:focus,
#cnpj-lookup-container select.form-control:focus,
#inputCNPJ:focus,
#selectQSA:focus,
#inputEmailCNPJ:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
}

/* Texto de ajuda */
#cnpj-lookup-container .cnpj-info,
#cnpj-lookup-container small {
    color: #64748b !important;
    font-size: 0.85rem !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#cnpj-lookup-container .cnpj-info::before,
#cnpj-lookup-container small i {
    color: #3b82f6 !important;
}

/* Status de sucesso */
#cnpj-status.success,
#cnpj-lookup-container .alert-success {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%) !important;
    border: none !important;
    border-left: 4px solid #22c55e !important;
    color: #166534 !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 16px 20px !important;
    margin: 0 25px 25px 25px !important;
    font-weight: 500 !important;
}

/* Status de loading */
#cnpj-status.loading {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%) !important;
    border: none !important;
    border-left: 4px solid #f59e0b !important;
    color: #92400e !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 16px 20px !important;
    margin: 0 25px 25px 25px !important;
}

/* Status de erro */
#cnpj-status.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border: none !important;
    border-left: 4px solid #ef4444 !important;
    color: #991b1b !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 16px 20px !important;
    margin: 0 25px 25px 25px !important;
}

/* Colunas internas */
#cnpj-lookup-container .col-sm-5,
#cnpj-lookup-container .col-sm-4,
#cnpj-lookup-container .col-sm-3,
#cnpj-lookup-container .col-md-5,
#cnpj-lookup-container .col-md-4,
#cnpj-lookup-container .col-md-3 {
    padding: 0 12px !important;
}

/* Área dedicada wrapper */
#cnpj-lookup-area {
    margin-bottom: 10px;
}

/* Reset para formulário normal */
#containerNewUserSignup .row,
#containerNewUserSignup .form-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#containerNewUserSignup > .sub-heading {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#containerNewUserSignup .prepend-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ===========================================
   CORREÇÃO DE SEPARADORES NO DROPDOWN
   =========================================== */

/* Esconder separadores de texto "-----" */
.nav-menu .dropdown-menu > li > a:empty,
.dropdown-menu > li > a:empty,
.dropdown-menu > li.divider,
.nav-menu .dropdown-menu > li.divider {
    display: none !important;
}

/* Separador real - linha sutil */
.dropdown-menu .divider {
    height: 1px;
    margin: 8px 0;
    background-color: #e5e7eb;
    border: none;
}

/* Esconder itens de menu que são apenas traços */
.nav-menu .dropdown-menu > li > a[href="#"]:not([data-toggle]),
.dropdown-menu > li > a[href="#"]:not([data-toggle]) {
    /* Verifica se é separador */
}

/* Header de seção no dropdown */
.dropdown-menu > li.dropdown-header,
.nav-menu .dropdown-menu > li.dropdown-header {
    padding: 10px 20px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilizar separadores que aparecem como texto */
.nav-menu .dropdown-menu > li > a,
.dropdown-menu > li > a {
    min-height: auto;
}

/* ===========================================
   AUMENTO GERAL DO TAMANHO DAS FONTES
   =========================================== */

/* Base do body */
body {
    font-size: 16px !important;
    line-height: 1.6;
}

/* Parágrafos e texto geral */
p, span, div, li, td, th, label {
    font-size: 1rem;
    line-height: 1.6;
}

/* Títulos maiores */
h1 {
    font-size: 2.25rem !important;
}

h2 {
    font-size: 1.875rem !important;
}

h3 {
    font-size: 1.5rem !important;
}

h4 {
    font-size: 1.25rem !important;
}

h5 {
    font-size: 1.125rem !important;
}

h6 {
    font-size: 1rem !important;
}

/* Menu de navegação */
.nav-menu > li > a {
    font-size: 0.95rem !important;
    padding: 12px 15px !important;
    white-space: nowrap !important;
}

.nav-menu .dropdown-menu > li > a {
    font-size: 0.95rem !important;
    padding: 12px 18px !important;
    white-space: nowrap !important;
}

/* Botões */
.btn {
    font-size: 1rem !important;
    padding: 12px 24px !important;
}

.btn-sm {
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
}

.btn-lg {
    font-size: 1.125rem !important;
    padding: 14px 28px !important;
}

/* Formulários */
.form-control {
    font-size: 1rem !important;
    padding: 12px 16px !important;
    height: auto !important;
}

/* ===========================================
   ESTILO 1: LABELS VISÍVEIS (TRADICIONAL)
   =========================================== */

/* Esconder ícones dentro dos campos */
.form-group.prepend-icon > label.field-icon {
    display: none !important;
}

/* Campos sem padding extra para ícone */
.prepend-icon .form-control,
.prepend-icon input.field,
.prepend-icon select.field,
.form-group.prepend-icon input,
.form-group.prepend-icon select {
    padding-left: 16px !important;
}

/* Mostrar placeholder como indicação */
.form-group.prepend-icon input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Labels visíveis acima dos campos */
#containerNewUserSignup .form-group {
    margin-bottom: 20px;
}

/* Criar label visível baseado no placeholder */
#containerNewUserSignup .form-group.prepend-icon::before {
    content: attr(data-label);
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

/* Estilo dos inputs - limpo e moderno */
#containerNewUserSignup input.field,
#containerNewUserSignup select.field,
#containerNewUserSignup .form-control {
    width: 100%;
    padding: 14px 16px !important;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
}

#containerNewUserSignup input.field:focus,
#containerNewUserSignup select.field:focus,
#containerNewUserSignup .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

#containerNewUserSignup input.field:hover,
#containerNewUserSignup select.field:hover {
    border-color: #d1d5db;
}

/* Títulos das seções */
#containerNewUserSignup .sub-heading {
    margin: 35px 0 25px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

#containerNewUserSignup .sub-heading span {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 10px;
}

#containerNewUserSignup .sub-heading span::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    border-radius: 2px;
}

/* Campo de telefone */
#containerNewUserSignup input[type="tel"] {
    padding-left: 90px !important;
}

/* Select dropdown */
#containerNewUserSignup select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
}

/* Rows com melhor espaçamento */
#containerNewUserSignup .row {
    margin-left: -10px;
    margin-right: -10px;
}

#containerNewUserSignup .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Tabelas */
.table > thead > tr > th,
.table > tbody > tr > td {
    font-size: 1rem !important;
    padding: 14px 16px !important;
}

/* Alertas */
.alert {
    font-size: 1rem !important;
    padding: 16px 20px !important;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.95rem !important;
}

.breadcrumb > li + li:before {
    font-size: 0.95rem !important;
}

/* Panel headers e body */
.panel-heading {
    font-size: 1.1rem !important;
    padding: 16px 20px !important;
}

.panel-body {
    font-size: 1rem !important;
    padding: 20px !important;
}

/* Sidebar */
.sidebar .panel-heading {
    font-size: 1rem !important;
}

.sidebar .list-group-item {
    font-size: 1rem !important;
    padding: 14px 20px !important;
}

/* Cards do dashboard */
.summary-number {
    font-size: 2.5rem !important;
}

.summary-label {
    font-size: 1rem !important;
}

.profile-name {
    font-size: 1.75rem !important;
}

.profile-company {
    font-size: 1.1rem !important;
}

.action-btn {
    font-size: 1rem !important;
    padding: 14px 24px !important;
}

/* Business cards */
.business-card .card-header h3 {
    font-size: 1.2rem !important;
}

.business-card .card-list a,
.business-card .card-list span {
    font-size: 1rem !important;
    padding: 14px 20px !important;
}

/* Header do site */
.btn-header-cart {
    font-size: 1rem !important;
    padding: 12px 24px !important;
}

.btn-header-logout {
    font-size: 0.95rem !important;
    padding: 10px 20px !important;
}

.header-link {
    font-size: 1rem !important;
}

/* Menu navbar - textos maiores */
.nav-menu > li > a {
    font-size: 1.25rem !important;
    padding: 20px 26px !important;
}

.nav-menu .dropdown-menu > li > a {
    font-size: 1.3rem !important;
    padding: 18px 30px !important;
}

/* Page titles */
.page-header h1,
.panel-title {
    font-size: 1.5rem !important;
}

/* Texto em inputs placeholder */
input::placeholder,
textarea::placeholder {
    font-size: 1rem !important;
}

/* Links da sidebar */
.list-group-item {
    font-size: 1rem !important;
}

/* Modais */
.modal-title {
    font-size: 1.35rem !important;
}

.modal-body {
    font-size: 1rem !important;
}

/* Footer */
footer, #footer, section#footer {
    font-size: 0.95rem !important;
}

/* Badges */
.badge, .label {
    font-size: 0.85rem !important;
    padding: 5px 10px !important;
}

/* Dropdowns gerais */
.dropdown-menu > li > a {
    font-size: 1rem !important;
    padding: 12px 20px !important;
}

/* Corrigir textos muito pequenos */
small, .small {
    font-size: 0.9rem !important;
}

/* Help blocks */
.help-block {
    font-size: 0.9rem !important;
}

/* Popover e tooltip */
.popover-content {
    font-size: 0.95rem !important;
}

.tooltip-inner {
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
}

/* ===========================================
   PÁGINA DE SERVIÇOS - VISUAL MODERNO
   =========================================== */

/* Container da tabela */
.table-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 20px;
}

/* Header do DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 20px 25px;
    font-size: 1rem;
}

.dataTables_wrapper .dataTables_filter input {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 1rem;
    width: 280px;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Cabeçalho da tabela - Identidade Visual WSChat */
.table-list thead,
table.table-list thead,
#tableServicesList thead,
.table.dataTable thead,
.dataTables_wrapper thead {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
}

.table-list thead th,
table.table-list thead th,
#tableServicesList thead th,
.table.dataTable thead th,
.dataTables_wrapper thead th {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    padding: 20px 24px !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Esconder setas de ordenação padrão do DataTables */
.table.dataTable thead .sorting:before,
.table.dataTable thead .sorting:after,
.table.dataTable thead .sorting_asc:before,
.table.dataTable thead .sorting_asc:after,
.table.dataTable thead .sorting_desc:before,
.table.dataTable thead .sorting_desc:after,
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after {
    display: none !important;
    opacity: 0 !important;
}

/* Esconder primeira coluna vazia (SSL) */
.table-list thead th:first-child,
.table-list tbody td:first-child,
#tableServicesList thead th:first-child,
#tableServicesList tbody td:first-child {
    display: none !important;
}

/* Bordas arredondadas no cabeçalho */
.table-list thead th:nth-child(2),
#tableServicesList thead th:nth-child(2) {
    border-radius: 12px 0 0 0 !important;
}

.table-list thead th:last-child,
#tableServicesList thead th:last-child {
    border-radius: 0 12px 0 0 !important;
}

/* Corpo da tabela */
.table-list tbody tr,
.table.dataTable tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.table-list tbody tr:nth-child(even),
.table.dataTable tbody tr:nth-child(even) {
    background: #f9fafb;
}

.table-list tbody tr:hover,
.table.dataTable tbody tr:hover {
    background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}

.table-list tbody td,
.table.dataTable tbody td {
    padding: 22px 24px !important;
    font-size: 1.1rem !important;
    vertical-align: middle;
    border: none !important;
    color: #374151;
}

.table-list tbody td strong,
.table.dataTable tbody td strong {
    font-size: 1.2rem !important;
    color: #1f2937;
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.table-list tbody td a,
.table.dataTable tbody td a {
    color: #3b82f6;
    font-size: 1rem;
    font-weight: 500;
}

.table-list tbody td a:hover,
.table.dataTable tbody td a:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* Status badges */
.table-list .label.status {
    display: inline-block;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-list .status-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.table-list .status-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.table-list .status-suspended {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.table-list .status-terminated,
.table-list .status-cancelled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

/* Paginação */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 10px 16px !important;
    margin: 0 3px;
    border-radius: 8px !important;
    border: 2px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-weight: 500;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Info de registros */
.dataTables_info {
    color: #6b7280;
    font-size: 1rem;
}

/* Select de quantidade */
.dataTables_length select {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    margin: 0 8px;
}

/* Responsivo */
@media (max-width: 768px) {
    .table-list tbody td {
        padding: 15px 12px !important;
        font-size: 0.95rem;
    }
    
    .table-list tbody td strong {
        font-size: 1rem;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 200px;
    }
}

/* ===========================================
   PÁGINA DE SERVIÇOS - LAYOUT DE CARDS
   =========================================== */

.services-page {
    padding: 0;
}

/* Cabeçalho da Página */
.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 30px 35px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.services-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.services-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-icon i {
    font-size: 2rem;
    color: #ffffff;
}

.services-title-info h2 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

.services-title-info p {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Campo de Busca */
.services-search {
    position: relative;
    width: 320px;
}

.services-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
}

.services-search input {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.services-search input:focus {
    outline: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.services-search input::placeholder {
    color: #9ca3af;
}

/* Grid de Cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

/* Card de Serviço */
.service-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    text-decoration: none;
    color: inherit;
}

/* Status Badge */
.service-status {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-status.status-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.service-status.status-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.service-status.status-suspended {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.service-status.status-terminated,
.service-status.status-cancelled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

/* Ícone do Serviço */
.service-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.service-card-icon i {
    font-size: 2.2rem;
    color: #3b82f6;
}

.service-card-icon i.fa-whatsapp {
    color: #25D366;
}

/* Título do Serviço */
.service-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Domínio */
.service-card-domain {
    font-size: 1rem;
    color: #3b82f6;
    margin-bottom: 20px;
}

.service-card-domain i {
    margin-right: 6px;
    font-size: 0.9rem;
}

/* Informações */
.service-card-info {
    display: flex;
    gap: 30px;
    padding: 20px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    margin: 15px 0;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.85rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.info-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}

.info-cycle {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Botão de Ação */
.service-card-action {
    margin-top: auto;
    padding-top: 15px;
}

.btn-manage {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #3b82f6;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.service-card:hover .btn-manage {
    color: #1e40af;
    gap: 15px;
}

.btn-manage i {
    transition: transform 0.2s;
}

.service-card:hover .btn-manage i {
    transform: translateX(5px);
}

/* Estado Vazio */
.services-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 40px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.empty-icon i {
    font-size: 3rem;
    color: #3b82f6;
}

.services-empty h3 {
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.services-empty p {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 30px;
}

.btn-new-service {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-new-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    color: #ffffff;
    text-decoration: none;
}

/* Responsivo */
@media (max-width: 768px) {
    .services-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 25px;
    }
    
    .services-header-left {
        flex-direction: column;
    }
    
    .services-search {
        width: 100%;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 25px;
    }
    
    .service-card-info {
        flex-direction: column;
        gap: 15px;
    }
}

/* ===========================================
   TABELA DE SERVIÇOS - DESIGN MODERNO
   =========================================== */

.services-table-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 25px;
}

.services-table {
    width: 100%;
    border-collapse: collapse;
}

/* Cabeçalho da Tabela */
.services-table thead {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.services-table thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    padding: 20px 25px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.services-table thead th:first-child {
    border-radius: 20px 0 0 0;
}

.services-table thead th:last-child {
    border-radius: 0 20px 0 0;
    text-align: center;
}

/* Linhas da Tabela */
.services-table tbody tr.service-row {
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.services-table tbody tr.service-row:hover {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
}

.services-table tbody td {
    padding: 25px;
    vertical-align: middle;
    border: none;
}

/* Célula do Produto */
.product-cell .product-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.product-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.product-icon i.fa-whatsapp {
    color: #25D366;
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
}

.product-domain {
    font-size: 0.95rem;
    color: #3b82f6;
}

/* Célula de Preço */
.price-cell {
    text-align: center;
}

.price-amount {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.price-cycle {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 3px;
}

/* Célula de Data */
.date-cell {
    text-align: center;
}

.due-date {
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
}

.no-date {
    color: #9ca3af;
}

/* Célula de Status */
.status-cell {
    text-align: center;
}

.status-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.status-badge.status-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.status-badge.status-suspended {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.status-badge.status-terminated,
.status-badge.status-cancelled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

/* Célula de Ação */
.action-cell {
    text-align: center;
}

.btn-table-manage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-table-manage:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    color: #ffffff;
    text-decoration: none;
}

.btn-table-manage i {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.btn-table-manage:hover i {
    transform: translateX(3px);
}

/* Estado Vazio */
.empty-table {
    padding: 60px 40px !important;
    text-align: center;
}

.empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.empty-content i {
    font-size: 3rem;
    color: #d1d5db;
}

.empty-content p {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
}

.btn-new-service-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-new-service-sm:hover {
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

/* Responsivo */
@media (max-width: 992px) {
    .services-table thead {
        display: none;
    }
    
    .services-table tbody tr.service-row {
        display: block;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .services-table tbody td {
        display: block;
        padding: 10px 0;
        text-align: left !important;
    }
    
    .services-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        display: block;
        margin-bottom: 5px;
        font-size: 0.85rem;
        text-transform: uppercase;
    }
    
    .price-cell, .date-cell, .status-cell, .action-cell {
        text-align: left !important;
    }
    
    .btn-table-manage {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* ===========================================
   PÁGINA DE DETALHES DO PRODUTO - MODERNO
   =========================================== */

.product-details-page {
    padding: 0;
}

/* Cabeçalho do Produto */
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 35px 40px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.product-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.product-header-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-header-icon i {
    font-size: 2.2rem;
    color: #ffffff;
}

.product-header-info h1 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.product-header-info .product-group {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

.product-status-badge {
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-status-badge.status-active {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.product-status-badge.status-pending {
    background: #f59e0b;
    color: #ffffff;
}

.product-status-badge.status-suspended {
    background: #ef4444;
    color: #ffffff;
}

.product-status-badge.status-terminated,
.product-status-badge.status-cancelled {
    background: #6b7280;
    color: #ffffff;
}

/* Grid Principal */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

/* Cards */
.product-info-card,
.product-actions-card,
.product-tech-card,
.product-extra-card,
.product-addons-card,
.module-area-card,
.hook-output-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.product-tech-card,
.product-extra-card,
.product-addons-card,
.module-area-card,
.hook-output-card {
    margin-bottom: 25px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.card-header i {
    font-size: 1.3rem;
    color: #3b82f6;
}

.card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}

.card-body {
    padding: 25px;
}

/* Info Rows */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
}

.info-value {
    font-size: 1.1rem;
    color: #1f2937;
    font-weight: 600;
}

.info-value.price {
    color: #22c55e;
}

/* Botões de Ação */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.action-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.action-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.action-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.action-btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.action-btn-success:hover {
    color: #ffffff;
}

.action-btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.action-btn-info:hover {
    color: #ffffff;
}

.action-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.action-btn-danger:hover {
    color: #ffffff;
}

.action-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Tech Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #f8fafc;
    border-radius: 12px;
}

.tech-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-icon i {
    font-size: 1.2rem;
    color: #ffffff;
}

.tech-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-label {
    font-size: 0.9rem;
    color: #6b7280;
}

.tech-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

/* Config Grid */
.config-section {
    margin-bottom: 25px;
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8fafc;
    border-radius: 10px;
}

.config-label {
    font-size: 0.95rem;
    color: #6b7280;
}

.config-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Addons Grid */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.addon-item {
    padding: 20px;
    background: #f8fafc;
    border-radius: 15px;
    border: 1px solid #e5e7eb;
}

.addon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.addon-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.addon-status {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.addon-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.addon-price {
    font-size: 1rem;
    font-weight: 600;
    color: #22c55e;
}

.addon-date {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Module Area */
.module-area-card {
    padding: 25px;
}

.module-area-card .card-header {
    margin: -25px -25px 25px -25px;
}

/* Hook Output */
.hook-output-card {
    padding: 25px;
}

/* Alert Invoice */
.alert-invoice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.alert-invoice-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.alert-invoice-danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #ef4444;
}

.alert-invoice-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
}

.btn-pay-invoice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-pay-invoice:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

/* Responsivo */
@media (max-width: 992px) {
    .product-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .product-header-left {
        flex-direction: column;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-grid,
    .config-grid,
    .addons-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   AJUSTE DE TAMANHO DE TEXTO - 13px BASE
   =========================================== */

.product-details-page {
    font-size: 15px;
}

.product-details-page .info-label {
    font-size: 15px;
}

.product-details-page .info-value {
    font-size: 16px;
}

.product-details-page .card-header h3 {
    font-size: 18px;
}

.product-details-page .tech-label {
    font-size: 14px;
}

.product-details-page .tech-value {
    font-size: 16px;
}

.product-details-page .config-label {
    font-size: 15px;
}

.product-details-page .config-value {
    font-size: 16px;
}

.product-details-page .action-btn {
    font-size: 16px;
}

.product-details-page .product-header-info h1 {
    font-size: 2.2rem;
}

.product-details-page .product-header-info .product-group {
    font-size: 1.2rem;
}

.product-details-page .product-status-badge {
    font-size: 15px;
}

/* Tabela de serviços - texto maior */
.services-table tbody td {
    font-size: 15px !important;
}

.services-table .product-name {
    font-size: 17px !important;
}

.services-table .product-domain {
    font-size: 14px !important;
}

.services-table .price-amount {
    font-size: 16px !important;
}

.services-table .due-date {
    font-size: 15px !important;
}

.services-table .status-badge {
    font-size: 13px !important;
}

.services-table .btn-table-manage {
    font-size: 14px !important;
}

/* ===========================================
   TEXTOS MAIORES - GLOBAL
   =========================================== */

/* Base do site */
body {
    font-size: 15px !important;
}

/* Menu principal */
.nav-menu > li > a {
    font-size: 1.1rem !important;
    padding: 18px 22px !important;
}

.nav-menu .dropdown-menu > li > a {
    font-size: 1.1rem !important;
    padding: 14px 24px !important;
}

/* Header */
.header-link {
    font-size: 15px !important;
}

.btn-header-cart,
.btn-header-logout {
    font-size: 15px !important;
}

/* Área do cliente - Dashboard */
.dashboard-v2 .welcome-greeting {
    font-size: 1.3rem !important;
}

.dashboard-v2 .welcome-name {
    font-size: 2.2rem !important;
}

.dashboard-v2 .welcome-company {
    font-size: 1.2rem !important;
}

.dashboard-v2 .stat-number {
    font-size: 2.2rem !important;
}

.dashboard-v2 .stat-label {
    font-size: 1.1rem !important;
}

.dashboard-v2 .section-title {
    font-size: 1.3rem !important;
}

.dashboard-v2 .action-label {
    font-size: 1rem !important;
}

/* Botões gerais */
.btn {
    font-size: 15px !important;
}

.btn-profile,
.btn-new-order {
    font-size: 15px !important;
}

/* Breadcrumb */
.breadcrumb,
.breadcrumb a,
.breadcrumb li {
    font-size: 14px !important;
}

/* Títulos de página */
h1.page-title,
.page-header h1 {
    font-size: 2rem !important;
}

h2 {
    font-size: 1.6rem !important;
}

h3 {
    font-size: 1.4rem !important;
}

/* Sidebar */
.sidebar .list-group-item {
    font-size: 15px !important;
}

/* Tabelas gerais */
.table td,
.table th {
    font-size: 15px !important;
}

/* Formulários */
.form-control,
input,
select,
textarea {
    font-size: 15px !important;
}

label {
    font-size: 15px !important;
}

/* Alertas */
.alert {
    font-size: 15px !important;
}

/* Cards e painéis */
.panel-title,
.card-title {
    font-size: 1.2rem !important;
}

.panel-body,
.card-body {
    font-size: 15px !important;
}

/* Links */
a {
    font-size: inherit;
}

/* Footer */
#footer,
section#footer {
    font-size: 14px !important;
}

/* Menu - Texto ainda maior */
.nav-menu > li > a {
    font-size: 1.2rem !important;
    padding: 20px 24px !important;
}

.nav-menu .dropdown-menu > li > a {
    font-size: 1.15rem !important;
    padding: 16px 26px !important;
}

/* Header botões e links */
.header-link {
    font-size: 16px !important;
}

.btn-header-cart {
    font-size: 16px !important;
    padding: 14px 26px !important;
}

.btn-header-logout {
    font-size: 15px !important;
    padding: 12px 22px !important;
}

/* ===========================================
   ÁREA DO CLIENTE - TEXTOS MAIORES
   =========================================== */

/* Dashboard - Welcome Banner */
.dashboard-v2 .welcome-greeting {
    font-size: 1.5rem !important;
}

.dashboard-v2 .welcome-name {
    font-size: 2.5rem !important;
}

.dashboard-v2 .welcome-company {
    font-size: 1.4rem !important;
}

/* Dashboard - Cards de Estatísticas */
.dashboard-v2 .stat-number {
    font-size: 2.8rem !important;
}

.dashboard-v2 .stat-label {
    font-size: 1.2rem !important;
}

/* Dashboard - Ações Rápidas */
.dashboard-v2 .section-title {
    font-size: 1.5rem !important;
}

.dashboard-v2 .action-label {
    font-size: 1.1rem !important;
}

/* Dashboard - Botões */
.dashboard-v2 .btn-profile,
.dashboard-v2 .btn-new-order {
    font-size: 1.1rem !important;
    padding: 16px 30px !important;
}

/* Dashboard - Busca */
.dashboard-v2 .search-input-wrapper input {
    font-size: 1.1rem !important;
}

.dashboard-v2 .search-input-wrapper button {
    font-size: 1.1rem !important;
}

/* Dashboard - Content Cards */
.dashboard-v2 .content-card-header h3 {
    font-size: 1.3rem !important;
}

.dashboard-v2 .content-list li a,
.dashboard-v2 .content-list li span {
    font-size: 1.1rem !important;
}

.dashboard-v2 .content-card-body {
    font-size: 1.05rem !important;
}

/* Página de Serviços */
.services-header .services-title-info h2 {
    font-size: 2rem !important;
}

.services-header .services-title-info p {
    font-size: 1.2rem !important;
}

.services-search input {
    font-size: 1.1rem !important;
}

/* Tabela de Serviços */
.services-table thead th {
    font-size: 1.1rem !important;
}

.services-table .product-name {
    font-size: 1.2rem !important;
}

.services-table .product-domain {
    font-size: 1rem !important;
}

.services-table .price-amount {
    font-size: 1.15rem !important;
}

.services-table .price-cycle {
    font-size: 1rem !important;
}

.services-table .due-date {
    font-size: 1.1rem !important;
}

.services-table .status-badge {
    font-size: 0.95rem !important;
}

.services-table .btn-table-manage {
    font-size: 1rem !important;
}

/* Detalhes do Produto */
.product-details-page .product-header-info h1 {
    font-size: 2.5rem !important;
}

.product-details-page .product-header-info .product-group {
    font-size: 1.3rem !important;
}

.product-details-page .card-header h3 {
    font-size: 1.3rem !important;
}

.product-details-page .info-label {
    font-size: 1.1rem !important;
}

.product-details-page .info-value {
    font-size: 1.15rem !important;
}

.product-details-page .action-btn {
    font-size: 1.1rem !important;
}

.product-details-page .tech-label {
    font-size: 1rem !important;
}

.product-details-page .tech-value {
    font-size: 1.15rem !important;
}

/* Títulos de Página */
h1, .h1 {
    font-size: 2.2rem !important;
}

h2, .h2 {
    font-size: 1.8rem !important;
}

h3, .h3 {
    font-size: 1.5rem !important;
}

/* Texto geral da área do cliente */
#main-body {
    font-size: 16px !important;
}

.main-content {
    font-size: 16px !important;
}

.main-content p,
.main-content span,
.main-content div {
    font-size: inherit;
}

/* ===========================================
   TEXTOS AINDA MAIORES - BOOST
   =========================================== */

/* Base */
body, #main-body, .main-content {
    font-size: 17px !important;
}

/* Menu */
.nav-menu > li > a {
    font-size: 1.3rem !important;
}

.nav-menu .dropdown-menu > li > a {
    font-size: 1.25rem !important;
}

/* Dashboard */
.dashboard-v2 .welcome-greeting {
    font-size: 1.6rem !important;
}

.dashboard-v2 .welcome-name {
    font-size: 2.8rem !important;
}

.dashboard-v2 .welcome-company {
    font-size: 1.5rem !important;
}

.dashboard-v2 .stat-number {
    font-size: 3rem !important;
}

.dashboard-v2 .stat-label {
    font-size: 1.3rem !important;
}

.dashboard-v2 .section-title {
    font-size: 1.6rem !important;
}

.dashboard-v2 .action-label {
    font-size: 1.2rem !important;
}

.dashboard-v2 .btn-profile,
.dashboard-v2 .btn-new-order {
    font-size: 1.2rem !important;
}

.dashboard-v2 .content-card-header h3 {
    font-size: 1.4rem !important;
}

.dashboard-v2 .content-list li a,
.dashboard-v2 .content-list li span {
    font-size: 1.15rem !important;
}

/* Serviços */
.services-header .services-title-info h2 {
    font-size: 2.2rem !important;
}

.services-header .services-title-info p {
    font-size: 1.3rem !important;
}

.services-table thead th {
    font-size: 1.15rem !important;
}

.services-table .product-name {
    font-size: 1.3rem !important;
}

.services-table .product-domain {
    font-size: 1.1rem !important;
}

.services-table .price-amount {
    font-size: 1.25rem !important;
}

.services-table .due-date {
    font-size: 1.15rem !important;
}

.services-table .btn-table-manage {
    font-size: 1.1rem !important;
}

/* Detalhes do Produto */
.product-details-page .product-header-info h1 {
    font-size: 2.8rem !important;
}

.product-details-page .product-header-info .product-group {
    font-size: 1.4rem !important;
}

.product-details-page .card-header h3 {
    font-size: 1.4rem !important;
}

.product-details-page .info-label {
    font-size: 1.15rem !important;
}

.product-details-page .info-value {
    font-size: 1.25rem !important;
}

.product-details-page .action-btn {
    font-size: 1.15rem !important;
}

.product-details-page .tech-label {
    font-size: 1.1rem !important;
}

.product-details-page .tech-value {
    font-size: 1.2rem !important;
}

/* Títulos */
h1, .h1 {
    font-size: 2.5rem !important;
}

h2, .h2 {
    font-size: 2rem !important;
}

h3, .h3 {
    font-size: 1.6rem !important;
}

/* Botões e formulários */
.btn {
    font-size: 16px !important;
}

.form-control, input, select, textarea {
    font-size: 16px !important;
}

label {
    font-size: 16px !important;
}

/* Tabelas */
.table td, .table th {
    font-size: 16px !important;
}

/* Sidebar */
.sidebar .list-group-item {
    font-size: 16px !important;
}

/* ===========================================
   CARDS - HOVER SUAVE SEM SUBLINHADO
   =========================================== */

/* Stats Cards - Dashboard */
.stat-card,
.stat-card:hover,
.stat-card:focus,
.stat-card:active {
    text-decoration: none !important;
}

.stat-card * {
    text-decoration: none !important;
}

.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.stat-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

/* Quick Action Cards */
.quick-action-card,
.quick-action-card:hover,
.quick-action-card:focus {
    text-decoration: none !important;
}

.quick-action-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.quick-action-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Service Cards */
.service-card,
.service-card:hover,
.service-card:focus {
    text-decoration: none !important;
}

.service-card * {
    text-decoration: none !important;
}

/* Content Cards */
.content-card a,
.content-card a:hover,
.content-list li a,
.content-list li a:hover {
    text-decoration: none !important;
}

.content-list li a {
    transition: background 0.2s ease, padding-left 0.2s ease !important;
}

.content-list li a:hover {
    background: #f8fafc !important;
    padding-left: 25px !important;
}

/* Todos os links dentro de cards */
.dashboard-v2 a,
.dashboard-v2 a:hover,
.dashboard-v2 a:focus,
.dashboard-v2 a:active {
    text-decoration: none !important;
}

/* Tabela de serviços */
.services-table tbody tr {
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.services-table tbody tr:hover {
    transform: none !important;
    box-shadow: inset 4px 0 0 #3b82f6 !important;
}

/* Botões - sem sublinhado */
.btn,
.btn:hover,
.btn:focus,
.action-btn,
.action-btn:hover,
.btn-manage,
.btn-manage:hover,
.btn-table-manage,
.btn-table-manage:hover {
    text-decoration: none !important;
}

/* Links gerais na área do cliente */
.main-content a:hover {
    text-decoration: none !important;
}

/* ===========================================
   PÁGINA DE TICKETS - LAYOUT MODERNO
   =========================================== */

.ticket-page {
    padding: 0;
}

/* Cabeçalho */
.ticket-header {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 35px 40px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.ticket-header-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-header-icon i {
    font-size: 2.2rem;
    color: #ffffff;
}

.ticket-header-info h1 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.ticket-header-info p {
    margin: 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Grid de Departamentos */
.departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Card de Departamento */
.department-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    text-decoration: none !important;
}

.department-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.department-icon i {
    font-size: 1.8rem;
    color: #3b82f6;
}

.department-info {
    flex: 1;
}

.department-info h3 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2937;
}

.department-info p {
    margin: 0;
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.5;
}

.department-arrow {
    width: 45px;
    height: 45px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.department-arrow i {
    font-size: 1rem;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.department-card:hover .department-arrow {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.department-card:hover .department-arrow i {
    color: #ffffff;
    transform: translateX(3px);
}

/* Dica */
.ticket-tip {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #f59e0b;
}

.ticket-tip i {
    font-size: 1.5rem;
    color: #d97706;
}

.ticket-tip span {
    font-size: 1.05rem;
    color: #92400e;
}

.ticket-tip a {
    color: #1e40af;
    font-weight: 600;
}

.ticket-tip a:hover {
    text-decoration: underline !important;
}

/* Estado vazio */
.no-departments {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    background: #f9fafb;
    border-radius: 16px;
}

.no-departments i {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 15px;
}

.no-departments p {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
}

/* Responsivo */
@media (max-width: 768px) {
    .ticket-header {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    
    .departments-grid {
        grid-template-columns: 1fr;
    }
    
    .department-card {
        padding: 25px;
    }
    
    .ticket-tip {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   FORMULÁRIO DE TICKET - LAYOUT MODERNO
   =========================================== */

.ticket-form-page {
    padding: 0;
}

/* Cabeçalho */
.ticket-form-header {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 35px 40px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.ticket-form-header-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-form-header-icon i {
    font-size: 2.2rem;
    color: #ffffff;
}

.ticket-form-header-info h1 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.ticket-form-header-info p {
    margin: 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Cards do Formulário */
.ticket-form-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
}

.ticket-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.ticket-card-header i {
    font-size: 1.3rem;
    color: #3b82f6;
}

.ticket-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.ticket-card-body {
    padding: 25px;
}

/* Form Groups */
.ticket-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ticket-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ticket-form-group {
    margin-bottom: 20px;
}

.ticket-form-group.full-width {
    grid-column: 1 / -1;
}

.ticket-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.ticket-form-group label i {
    font-size: 0.95rem;
    color: #6b7280;
}

/* Inputs */
.ticket-input,
.ticket-select,
.ticket-textarea {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.05rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
}

.ticket-input:focus,
.ticket-select:focus,
.ticket-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.ticket-input.disabled,
.ticket-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

.ticket-input::placeholder,
.ticket-textarea::placeholder {
    color: #9ca3af;
}

.ticket-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 50px;
}

.ticket-textarea {
    min-height: 200px;
    resize: vertical;
}

/* Anexos */
.ticket-attachments {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #e5e7eb;
}

.ticket-attachments > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
}

.ticket-attachment-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.ticket-file-input {
    flex: 1;
    padding: 14px 18px;
    font-size: 1rem;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s;
}

.ticket-file-input:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.btn-add-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-attachment:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.ticket-attachment-info {
    margin-top: 12px;
    font-size: 0.95rem;
    color: #6b7280;
}

.ticket-attachment-info i {
    margin-right: 5px;
    color: #9ca3af;
}

/* Captcha */
.ticket-captcha {
    text-align: center;
    margin: 25px 0;
}

/* Botões de Ação */
.ticket-form-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.btn-submit-ticket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.btn-submit-ticket:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.btn-cancel-ticket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-cancel-ticket:hover {
    background: #e5e7eb;
    color: #374151;
    text-decoration: none !important;
}

/* Sugestões */
.ticket-suggestions {
    background: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

/* Responsivo */
@media (max-width: 992px) {
    .ticket-form-row,
    .ticket-form-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ticket-form-header {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    
    .ticket-form-actions {
        flex-direction: column;
    }
    
    .btn-submit-ticket,
    .btn-cancel-ticket {
        width: 100%;
        justify-content: center;
    }
    
    .ticket-attachment-row {
        flex-direction: column;
    }
    
    .btn-add-attachment {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   PÁGINA DE FATURAS - LAYOUT MODERNO
   =========================================== */

.invoices-page {
    padding: 0;
}

/* Cabeçalho */
.invoices-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    padding: 30px 35px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.invoices-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.invoices-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invoices-icon i {
    font-size: 2rem;
    color: #ffffff;
}

.invoices-title-info h2 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

.invoices-title-info p {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Campo de Busca */
.invoices-search {
    position: relative;
    width: 300px;
}

.invoices-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
}

.invoices-search input {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.invoices-search input:focus {
    outline: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Tabela */
.invoices-table-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.invoices-table {
    width: 100%;
    border-collapse: collapse;
}

.invoices-table thead {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.invoices-table thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 20px 24px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.invoices-table thead th:first-child {
    border-radius: 20px 0 0 0;
}

.invoices-table thead th:last-child {
    border-radius: 0 20px 0 0;
    text-align: center;
}

.invoices-table tbody tr.invoice-row {
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.invoices-table tbody tr.invoice-row:hover {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
}

.invoices-table tbody td {
    padding: 22px 24px;
    vertical-align: middle;
    border: none;
}

/* Célula do Número da Fatura */
.invoice-num-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.invoice-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invoice-icon i {
    font-size: 1.3rem;
    color: #3b82f6;
}

.invoice-number {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
}

/* Células de Data */
.date-cell .date-value {
    font-size: 1.05rem;
    color: #374151;
}

/* Célula de Total */
.total-cell .total-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
}

/* Status */
.invoice-status {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-status.status-paid,
.invoice-status.status-Paid {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.invoice-status.status-unpaid,
.invoice-status.status-Unpaid {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.invoice-status.status-cancelled,
.invoice-status.status-Cancelled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

.invoice-status.status-refunded,
.invoice-status.status-Refunded {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

/* Botão Ver */
.btn-view-invoice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-view-invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    color: #ffffff;
}

/* Responsivo */
@media (max-width: 992px) {
    .invoices-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .invoices-header-left {
        flex-direction: column;
    }
    
    .invoices-search {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .invoices-table thead {
        display: none;
    }

    .invoices-table tbody tr.invoice-row {
        display: block;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .invoices-table tbody td {
        display: block;
        padding: 10px 0;
        text-align: left;
    }

    .btn-view-invoice {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* =====================================================
   TICKETS LIST PAGE - Layout Moderno
   ===================================================== */

.tickets-page {
    padding: 30px 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Cabeçalho da Página */
.tickets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 35px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.25);
}

.tickets-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.tickets-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.tickets-icon i {
    font-size: 2.5rem;
    color: #ffffff;
}

.tickets-title-info h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.tickets-title-info p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.tickets-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tickets-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 14px 20px;
    min-width: 320px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tickets-search i {
    color: #6b7280;
    margin-right: 12px;
    font-size: 1.1rem;
}

.tickets-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 1.05rem;
    width: 100%;
    color: #374151;
}

.tickets-search input::placeholder {
    color: #9ca3af;
}

/* Botão Novo Ticket */
.btn-new-ticket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: #ffffff;
    color: #3b82f6 !important;
    border-radius: 15px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-new-ticket:hover {
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: #2563eb !important;
    text-decoration: none !important;
}

.btn-new-ticket i {
    font-size: 1rem;
}

/* Container da Tabela */
.tickets-table-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Tabela */
.tickets-table {
    width: 100%;
    border-collapse: collapse;
}

.tickets-table thead {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.tickets-table thead th {
    padding: 22px 25px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff !important;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
}

.tickets-table tbody tr.ticket-row {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
    cursor: pointer;
}

.tickets-table tbody tr.ticket-row:hover {
    background: #f8fafc;
}

.tickets-table tbody tr.ticket-row.ticket-unread {
    background: #eff6ff;
}

.tickets-table tbody tr.ticket-row.ticket-unread:hover {
    background: #dbeafe;
}

.tickets-table tbody td {
    padding: 20px 25px;
    vertical-align: middle;
    border: none !important;
}

/* Célula do Assunto */
.subject-cell .subject-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.subject-cell .ticket-icon {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subject-cell .ticket-icon i {
    font-size: 1.3rem;
    color: #3b82f6;
}

.subject-cell .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #ef4444;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.subject-cell .subject-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subject-cell .ticket-id {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3b82f6;
}

.subject-cell .ticket-subject {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Célula de Departamento */
.dept-cell .dept-name {
    font-size: 1.05rem;
    color: #374151;
    font-weight: 500;
}

/* Status do Ticket */
.ticket-status {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-status.status-open,
.ticket-status.status-Open {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.ticket-status.status-answered,
.ticket-status.status-Answered {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.ticket-status.status-customer-reply,
.ticket-status.status-Customer-Reply {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.ticket-status.status-on-hold,
.ticket-status.status-On-Hold {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.ticket-status.status-in-progress,
.ticket-status.status-In-Progress {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.ticket-status.status-closed,
.ticket-status.status-Closed {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
}

.ticket-status.status-custom {
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Célula de Data */
.tickets-table .date-cell .date-value {
    font-size: 1.05rem;
    color: #374151;
}

/* Botão Ver Ticket */
.btn-view-ticket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff !important;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-view-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Empty State */
.tickets-table .empty-table {
    text-align: center;
    padding: 80px 40px !important;
}

.tickets-table .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tickets-table .empty-content i {
    font-size: 4rem;
    color: #d1d5db;
}

.tickets-table .empty-content p {
    font-size: 1.2rem;
    color: #6b7280;
    margin: 0;
}

.btn-new-ticket-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff !important;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-new-ticket-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Responsivo - Tickets */
@media (max-width: 992px) {
    .tickets-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .tickets-header-left {
        flex-direction: column;
    }

    .tickets-header-right {
        flex-direction: column;
        width: 100%;
    }

    .tickets-search {
        width: 100%;
        min-width: unset;
    }

    .btn-new-ticket {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .tickets-table thead {
        display: none;
    }

    .tickets-table tbody tr.ticket-row {
        display: block;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .tickets-table tbody td {
        display: block;
        padding: 10px 0;
        text-align: left;
    }

    .tickets-table tbody td.action-cell {
        padding-top: 15px;
    }

    .btn-view-ticket {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   PROFILE PAGE (Meus Dados) - Layout Moderno
   ===================================================== */

.profile-page {
    padding: 30px 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Cabeçalho da Página */
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 35px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.25);
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.profile-avatar {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.profile-avatar i {
    font-size: 3rem;
    color: #ffffff;
}

.profile-header-info h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.profile-header-info p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.profile-header-right .profile-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.profile-header-right .profile-email i {
    color: #3b82f6;
}

/* Grid de Cards */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

/* Cards */
.profile-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.profile-card-header i {
    font-size: 1.5rem;
    color: #ffffff;
}

.profile-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.profile-card-body {
    padding: 28px;
}

/* Form Rows */
.profile-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.profile-form-row:last-child {
    margin-bottom: 0;
}

.profile-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Form Groups */
.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-form-group.full-width {
    grid-column: 1 / -1;
}

.profile-form-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.profile-form-group label i {
    font-size: 1rem;
    color: #3b82f6;
    width: 20px;
    text-align: center;
}

/* Inputs */
.profile-input,
.profile-select {
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s;
    width: 100%;
}

.profile-input:focus,
.profile-select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.profile-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

.profile-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 50px;
}

/* Country dropdown styling */
.profile-form-group select.form-control,
.profile-card-body select.form-control {
    padding: 16px 50px 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s;
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
}

.profile-form-group select.form-control:focus,
.profile-card-body select.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Custom Fields */
.profile-custom-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f3f4f6;
}

.profile-custom-input input,
.profile-custom-input select {
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s;
    width: 100%;
}

.profile-custom-input input:focus,
.profile-custom-input select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Checkboxes */
.profile-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.profile-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f9fafb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.profile-checkbox:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.profile-checkbox input[type="checkbox"] {
    display: none;
}

.profile-checkbox .checkbox-custom {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.profile-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
}

.profile-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "✓";
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

.profile-checkbox .checkbox-label {
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
}

/* Marketing Card */
.profile-marketing-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 35px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    border: 2px solid #bae6fd;
}

.profile-marketing-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-marketing-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-marketing-icon i {
    font-size: 1.5rem;
    color: #ffffff;
}

.profile-marketing-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e40af;
}

.profile-marketing-info p {
    margin: 0;
    font-size: 1rem;
    color: #3b82f6;
}

/* Botões de Ação */
.profile-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 10px;
}

.btn-save-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border: none;
    border-radius: 15px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

.btn-save-profile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.4);
}

.btn-cancel-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: #ffffff;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel-profile:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-3px);
}

/* Responsivo - Profile */
@media (max-width: 1200px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .profile-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .profile-header-left {
        flex-direction: column;
    }

    .profile-form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-form-row,
    .profile-form-row-3 {
        grid-template-columns: 1fr;
    }

    .profile-checkboxes {
        grid-template-columns: 1fr;
    }

    .profile-custom-fields {
        grid-template-columns: 1fr;
    }

    .profile-marketing-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .profile-marketing-content {
        flex-direction: column;
    }

    .profile-actions {
        flex-direction: column;
    }

    .btn-save-profile,
    .btn-cancel-profile {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   FIX: International Phone Input (intl-tel-input)
   ===================================================== */

.profile-card-body .iti,
.profile-form-group .iti {
    width: 100%;
    display: block;
}

.profile-card-body .iti input,
.profile-form-group .iti input,
.profile-card-body .iti input.form-control,
.profile-form-group .iti input.form-control,
.profile-card-body input[type="tel"],
.profile-form-group input[type="tel"] {
    width: 100% !important;
    padding: 16px 20px 16px 90px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    color: #1f2937 !important;
    background: #f9fafb !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.profile-card-body .iti input:focus,
.profile-form-group .iti input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.profile-card-body .iti__flag-container,
.profile-form-group .iti__flag-container {
    padding: 0 !important;
    height: 100% !important;
}

.profile-card-body .iti__selected-flag,
.profile-form-group .iti__selected-flag {
    padding: 0 12px 0 16px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border-right: 2px solid #e5e7eb !important;
    border-radius: 10px 0 0 10px !important;
}

.profile-card-body .iti__selected-flag:hover,
.profile-form-group .iti__selected-flag:hover {
    background: #f3f4f6 !important;
}

.profile-card-body .iti__arrow,
.profile-form-group .iti__arrow {
    margin-left: 8px !important;
    border-top-color: #6b7280 !important;
}

.profile-card-body .iti--separate-dial-code .iti__selected-dial-code,
.profile-form-group .iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 8px !important;
    font-size: 1rem !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Dropdown do país */
.iti__country-list {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #e5e7eb !important;
    max-height: 250px !important;
}

.iti__country {
    padding: 10px 15px !important;
    font-size: 1rem !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background: #eff6ff !important;
}

.iti__dial-code {
    color: #6b7280 !important;
}

/* =====================================================
   EMAILS PAGE - Layout Moderno
   ===================================================== */

.emails-page {
    padding: 30px 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* Cabeçalho da Página */
.emails-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 35px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.25);
}

.emails-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.emails-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.emails-icon i {
    font-size: 2.5rem;
    color: #ffffff;
}

.emails-title-info h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.emails-title-info p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.emails-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.emails-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 14px 20px;
    min-width: 320px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.emails-search i {
    color: #6b7280;
    margin-right: 12px;
    font-size: 1.1rem;
}

.emails-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 1.05rem;
    width: 100%;
    color: #374151;
}

.emails-search input::placeholder {
    color: #9ca3af;
}

/* Container da Tabela */
.emails-table-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Tabela */
.emails-table {
    width: 100%;
    border-collapse: collapse;
}

.emails-table thead {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.emails-table thead th {
    padding: 22px 25px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff !important;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
}

.emails-table tbody tr.email-row {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
    cursor: pointer;
}

.emails-table tbody tr.email-row:hover {
    background: #f8fafc;
}

.emails-table tbody td {
    padding: 20px 25px;
    vertical-align: middle;
    border: none !important;
}

/* Célula de Data */
.emails-table .date-cell .date-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.emails-table .date-cell .email-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emails-table .date-cell .email-icon i {
    font-size: 1.3rem;
    color: #3b82f6;
}

.emails-table .date-cell .date-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #374151;
}

/* Célula de Assunto */
.emails-table .subject-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.emails-table .subject-cell .email-subject {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.emails-table .subject-cell .attachment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fef3c7;
    border-radius: 8px;
}

.emails-table .subject-cell .attachment-badge i {
    font-size: 0.9rem;
    color: #d97706;
}

/* Botão Ver Email */
.btn-view-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-view-email:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* Empty State */
.emails-table .empty-table {
    text-align: center;
    padding: 80px 40px !important;
}

.emails-table .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.emails-table .empty-content i {
    font-size: 4rem;
    color: #d1d5db;
}

.emails-table .empty-content p {
    font-size: 1.2rem;
    color: #6b7280;
    margin: 0;
}

/* Responsivo - Emails */
@media (max-width: 992px) {
    .emails-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .emails-header-left {
        flex-direction: column;
    }

    .emails-search {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .emails-table thead {
        display: none;
    }

    .emails-table tbody tr.email-row {
        display: block;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .emails-table tbody td {
        display: block;
        padding: 10px 0;
        text-align: left;
    }

    .emails-table .subject-cell {
        flex-wrap: wrap;
    }

    .btn-view-email {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* =====================================================
   EMAIL MODAL - Layout Moderno
   ===================================================== */

.email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.email-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.email-modal {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.email-modal-overlay.active .email-modal {
    transform: scale(1) translateY(0);
}

.email-modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    flex-shrink: 0;
}

.email-modal-header-icon {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.email-modal-header-icon i {
    font-size: 1.6rem;
    color: #ffffff;
}

.email-modal-header-info {
    flex: 1;
    min-width: 0;
}

.email-modal-header-info h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-modal-header-info p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-modal-close {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.email-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.email-modal-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.email-modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 1.1rem;
}

.email-modal-loading i {
    font-size: 2.5rem;
    color: #3b82f6;
}

.email-modal-body iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: none;
    display: none;
}

.email-modal-footer {
    padding: 20px 30px;
    background: #f8fafc;
    border-top: 2px solid #e5e7eb;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-modal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-close-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Responsivo - Modal */
@media (max-width: 768px) {
    .email-modal-overlay {
        padding: 15px;
    }

    .email-modal {
        max-height: 95vh;
    }

    .email-modal-header {
        padding: 20px;
    }

    .email-modal-header-info h2 {
        font-size: 1.1rem;
    }

    .email-modal-body iframe {
        min-height: 350px;
    }
}