/* ==========================================================================
   RESET E VARIAVEIS
   ========================================================================== */
:root {
    --primary-red: #D32F2F;
    --primary-dark: #9A0007;
    --accent-orange: #E65100;
    --bg-light: #F8F9FA;
    --surface-white: #FFFFFF;
    --text-dark: #1E293B;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --radius: 8px;
}

    body {
      display: flex !important;
      flex-direction: column !important;
      min-height: 100vh !important;
    }

body.app-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   HEADER PRINCIPAL & BRANDING
   ========================================================================== */
.app-header {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--primary-red) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: var(--shadow-md) !important;
    position: relative !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

.header-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 12px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Título do Sistema */
.brand-system {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.brand-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #FFFFFF !important;
}

.brand-titles h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.brand-titles h1 span {
    color: #FFE082 !important;
}

.brand-titles p {
    font-size: 11px !important;
    margin: 2px 0 0 0 !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Botão PDF e Logo Fortaleza */
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.btn-converter {
    background: #009889 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.btn-converter:hover {
    background: #FFFFFF !important;
    color: var(--primary-red) !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.brand-logo img {
    height: 52px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}

/* ==========================================================================
   NAVEGAÇÃO (SOBREPOSIÇÃO DO MAIN_MENU ANTIGO)
   ========================================================================== */
#main_menu,
.app-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    padding: 0 !important;
    background-color: #009889 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    z-index: 999 !important;
}


.nav-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

#main_menu ul.nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    gap: 4px !important;
}

#main_menu ul.nav-list > li {
    float: none !important;
    margin: 0 !important;
    padding: 7px !important;
    position: relative !important;
}

.nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: auto !important;
    line-height: normal !important;
    transition: all 0.2s ease !important;
}

.nav-item i {
    font-size: 14px !important;
}

.nav-item:hover,
#main_menu li:hover > a.nav-item {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.nav-logout {
    margin-left: auto !important;
}

.nav-item.logout {
    color: #FFCDD2 !important;
}

.nav-item.logout:hover {
    background: #B71C1C !important;
    color: #FFFFFF !important;
}

/* Dropdowns Sobrescrevendo o Estilo Antigo */
#main_menu ul.nav-list li.nav-item-dropdown {
    position: relative !important;
}

#main_menu ul.nav-list li.nav-item-dropdown:hover > ul.dropdown-menu {
    display: block !important;
}

#main_menu ul.dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    background: var(--surface-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    float: none !important;
    z-index: 1050 !important;
}

#main_menu ul.dropdown-menu li {
    float: none !important;
    width: 100% !important;
    border: none !important;
}

#main_menu ul.dropdown-menu li a {
    display: block !important;
    padding: 10px 18px !important;
    color: var(--text-dark) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
}

#main_menu ul.dropdown-menu li a:hover {
    background-color: #F1F5F9 !important;
    color: var(--primary-red) !important;
    font-weight: 600 !important;
}

.dropdown-header {
    padding: 8px 18px 4px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.5px !important;
}

.dropdown-divider {
    height: 1px !important;
    background-color: var(--border-color) !important;
    margin: 6px 0 !important;
}

/* ==========================================================================
   CONTEÚDO DA PÁGINA (PINACOTECA)
   ========================================================================== */
.app-content {
    max-width: 95% !important;
    margin: 24px auto !important;
    padding: 0 24px !important;
}

.space-me {
    height: 15px !important;
}


 



    /* 1. CABEÇALHO SUPERIOR LARGO */
    .top-header-full {
      width: 100%;
      background: linear-gradient(135deg, #D9381E 0%, #C22A0D 100%);
      color: #FFFFFF;
      padding: 24px 20px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .top-header-full h1 {
      font-size: 24px !important;
      font-weight: 800 !important;
      margin: 0 !important;
      color: #FFFFFF !important;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .top-header-full p {
      font-size: 13px;
      margin: 6px 0 0 0;
      opacity: 0.95;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    /* 2. LISTRA VERDE SOBRE O TOPO */
    .green-stripe {
      width: 100%;
      height: 5px;
      background-color: #00897B;
    }

    /* 3. ÁREA CENTRAL DO LOGIN */
    .login-container {
      flex: 1 0 auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 20px !important;
    }

    .login-box {
      width: 100%;
      max-width: 400px;
      background: #FFFFFF;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      border: 1px solid #E5E7EB;
      padding: 36px 30px;
    }

    .login-title {
      font-size: 16px !important;
      font-weight: 700 !important;
      color: #1F2937 !important;
      text-align: center;
      margin-bottom: 26px !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* INPUTS */
    .input-field-group {
      position: relative;
      margin-bottom: 20px;
    }

    .input-field-group i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9CA3AF;
      font-size: 15px;
      transition: color 0.2s ease;
    }

    .input-field-group input {
      width: 100% !important;
      height: 46px !important;
      padding-left: 42px !important;
      padding-right: 14px !important;
      box-sizing: border-box !important;
      border: 1px solid #D1D5DB !important;
      border-radius: 8px !important;
      font-size: 14px !important;
      color: #111827 !important;
      background-color: #FAFAFA !important;
      transition: all 0.2s ease;
    }

    .input-field-group input:focus {
      background-color: #FFFFFF !important;
      border-color: #00897B !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.15) !important;
    }

    .input-field-group input:focus + i,
    .input-field-group:focus-within i {
      color: #00897B;
    }

    /* Ajuste para o fundo azulado do autocomplete do Chrome */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px #F3F4F6 inset !important;
      transition: background-color 5000s ease-in-out 0s;
    }

    /* BOTÃO ACESSAR */
    .btn-submit {
      width: 100% !important;
      height: 46px !important;
      background-color: #00897B !important;
      border: none !important;
      border-radius: 8px !important;
      color: #FFFFFF !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.2s ease;
      margin-top: 10px;
    }

    .btn-submit:hover {
      background-color: #00796B !important;
      box-shadow: 0 4px 12px rgba(0, 137, 123, 0.25);
    }

    .btn-submit:active {
      transform: translateY(1px);
    }

    .alert-error {
      background-color: #FEF2F2 !important;
      border: 1px solid #FCA5A5 !important;
      color: #991B1B !important;
      border-radius: 8px !important;
      padding: 12px 14px !important;
      font-size: 13px !important;
      margin-bottom: 20px !important;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .maintenance-box {
      width: 100%;
      max-width: 500px;
      background: #FFF5F5;
      border: 1px solid #FEB2B2;
      border-radius: 12px;
      padding: 28px;
      text-align: center;
      margin: 20px auto;
    }

       .main-container {
      
        margin: 10px auto;
        padding: 0 15px;
    }

    /* CARD DA BUSCA MAIS COMPACTO */
    .search-card {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        padding: 10px 16px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        margin-bottom: 12px;
    }

    .search-card-title {
        font-size: 12px;
        font-weight: 700;
        color: #64748B;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .search-form-row {
        display: flex;
        align-items: flex-end;
        gap: 12px;
    }

    .form-group-custom label {
        font-size: 11px;
        font-weight: 700;
        color: #475569;
        margin: 0 0 2px 0;
    }

    .form-control-custom {
        height: 32px !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 4px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .btn-search {
        height: 32px;
        background-color: #00897B !important;
        border: none !important;
        border-radius: 4px !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
        padding: 0 16px !important;
        font-size: 12px !important;
        cursor: pointer;
    }

    /* TÍTULOS DE SEÇÃO MAIS ENXUTOS */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        padding: 6px 14px;
        border-left: 4px solid #00897B;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .section-header h2 {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        margin: 0 !important;
    }

    /* TABELAS COMPACTAS (Para caber na tela) */
    .custom-table-card {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        margin-bottom: 10px;
    }

    .custom-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

    .custom-table th, .custom-table td {
        border: 1px solid #F1F5F9;
        padding: 4px 2px !important; /* Padding reduzido drasticamente */
        text-align: center;
        vertical-align: middle;
    }

    .table-pagination-header {
        background-color: #F8FAFC;
        padding: 4px 12px;
        text-align: right;
        font-size: 11px;
        font-weight: 600;
        color: #64748B;
        border-bottom: 1px solid #E2E8F0;
    }

    .page-link-custom {
        display: inline-block;
        padding: 1px 5px;
        margin: 0 1px;
        border-radius: 3px;
        color: #00897B;
        text-decoration: none !important;
        font-weight: 600;
        font-size: 11px;
    }

    .page-link-custom.active {
        background-color: #D1E7DD;
        color: #0F5132 !important;
        font-weight: 800;
    }

    /* CARDS DOS LOTES COMPACTOS */
    .lote-item-link {
        text-decoration: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2px;
        border-radius: 4px;
    }

    .lote-item-link:hover {
        background-color: #F0FDF4;
    }

    .lote-number {
        font-size: 18px;
        font-weight: 200;
        color: #0F172A;
        line-height: 1.1;
    }

    .lote-total-badge {
        font-size: 12px;
        font-weight: 900;
        color: #887a7a;
     
        padding: 1px 4px;
        border-radius: 6px;
        margin-top: 2px;
        line-height: 1;
    }

    .table-footer-info {
        background-color: #F8FAFC;
        padding: 4px 14px;
        text-align: right;
        font-size: 11px;
        font-weight: 700;
        color: #334155;
        border-top: 1px solid #E2E8F0;
    }