/**




 * YTI&W Nexus Public Styles (Frontend Design System v2.0)




 *




 * Estilização completa da área do afiliado, incluindo:




 * - Dashboard Responsivo e Abas SPA.




 * - Carteira Virtual (Fintech Interface).




 * - Social Commerce Cards (WhatsApp Marketing).




 * - Gamificação (Badges de Nível).




 * - Login Customizado (Novo v2.1.2).




 * - Módulo de Autenticação Segura 2FA (v3.2).




 *




 * @package YTIW_Nexus\Public




 * @version 3.2.3




 */









/* 1. Variáveis Globais do Ecossistema */




:root {




    --ytiw-primary: #2271b1;




    --ytiw-primary-dark: #135e96;




    --ytiw-success: #28a745;




    --ytiw-warning: #ffc107;




    --ytiw-danger: #dc3545;




    --ytiw-info: #17a2b8;




    --ytiw-light: #f8f9fa;




    --ytiw-gray: #6c757d;




    --ytiw-border: #e2e4e7;




    --ytiw-shadow: 0 2px 10px rgba(0,0,0,0.05);




}









/* 2. Layout do Dashboard */




.ytiw-dashboard-wrap {




    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;




    max-width: 100% !important; /* FORÇADO: Garante largura total em qualquer tema */




    margin: 20px auto;




    color: #3c434a;




    line-height: 1.5;




    box-sizing: border-box;




}









.ytiw-dashboard-header {




    background: #fff;




    padding: 25px;




    border-radius: 12px;




    border: 1px solid var(--ytiw-border);




    margin-bottom: 25px;




    box-shadow: var(--ytiw-shadow);




}









/* 3. Navegação por Abas (SPA Style) */




.ytiw-tabs-nav {




    display: flex;




    gap: 5px;




    border-bottom: 2px solid #ddd;




    margin-bottom: 30px;




    overflow-x: auto;




    scrollbar-width: none; /* Firefox */




}









.ytiw-tabs-nav::-webkit-scrollbar {




    display: none; /* Chrome/Safari */




}









.ytiw-tab-btn {




    background: none;




    border: none;




    padding: 12px 20px;




    cursor: pointer;




    font-size: 14px;




    font-weight: 600;




    color: var(--ytiw-gray);




    border-bottom: 3px solid transparent;




    transition: all 0.3s ease;




    white-space: nowrap;




}









.ytiw-tab-btn:hover {




    color: var(--ytiw-primary);




}









.ytiw-tab-btn.active {




    color: var(--ytiw-primary);




    border-bottom-color: var(--ytiw-primary);




}









.ytiw-tab-content {




    display: none;




    animation: ytiwFadeIn 0.4s ease-out;




}









@keyframes ytiwFadeIn {




    from { opacity: 0; transform: translateY(10px); }




    to { opacity: 1; transform: translateY(0); }




}









/* 4. Cards e Containers */




.ytiw-public-card {




    background: #fff;




    border: 1px solid var(--ytiw-border);




    padding: 25px;




    border-radius: 12px;




    margin-bottom: 25px;




    box-shadow: var(--ytiw-shadow);




}









.ytiw-highlight {




    border-left: 5px solid var(--ytiw-primary);




    background: #f0f6fc;




}









/* 5. Fintech: Carteira e Saldo */




.ytiw-wallet-grid {




    display: grid;




    grid-template-columns: 1.5fr 1fr;




    gap: 25px;




}









@media (max-width: 850px) {




    .ytiw-wallet-grid { grid-template-columns: 1fr; }




}









.ytiw-wallet-hero {




    text-align: center;




    background: linear-gradient(135deg, #ffffff 0%, #f0f6fc 100%);




}









.ytiw-wallet-amount {




    font-size: 48px;




    font-weight: 800;




    color: var(--ytiw-primary);




    margin: 15px 0;




    letter-spacing: -1px;




}









.ytiw-wallet-label {




    text-transform: uppercase;




    font-size: 11px;




    font-weight: 700;




    color: var(--ytiw-gray);




    letter-spacing: 1px;




}









/* 6. Grid de Estatísticas */




.ytiw-stats-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));




    gap: 20px;




    margin-top: 20px;




}









.ytiw-stat-box {




    background: #fff;




    padding: 20px;




    border-radius: 12px;




    border: 1px solid var(--ytiw-border);




    text-align: center;




    transition: transform 0.2s;




}









.ytiw-stat-box:hover {




    transform: translateY(-3px);




}









.ytiw-stat-val {




    display: block;




    font-size: 32px;




    font-weight: 800;




    margin-bottom: 5px;




}









.ytiw-stat-val.sales { color: var(--ytiw-primary); }




.ytiw-stat-val.earnings { color: var(--ytiw-success); }




.ytiw-stat-val.unpaid { color: var(--ytiw-danger); }









.ytiw-stat-label {




    font-size: 11px;




    font-weight: 700;




    text-transform: uppercase;




    color: var(--ytiw-gray);




}









/* 7. Gamificação: Níveis e Progresso */




.ytiw-badge-level {




    display: inline-block;




    padding: 4px 14px;




    border-radius: 20px;




    font-size: 11px;




    font-weight: 800;




    color: #fff;




    text-transform: uppercase;




    box-shadow: 0 2px 4px rgba(0,0,0,0.1);




}









.ytiw-progress-bar {




    background-color: #eee;




    border-radius: 10px;




    height: 8px;




    margin-top: 12px;




    overflow: hidden;




}









.ytiw-progress-fill {




    height: 100%;




    border-radius: 10px;




    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);




}









/* 8. Social Commerce Grid */




.ytiw-social-grid {




    display: grid;




    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));




    gap: 20px;




    margin-top: 20px;




}









.ytiw-social-card {




    background: #fff;




    border-radius: 12px;




    border: 1px solid var(--ytiw-border);




    overflow: hidden;




    transition: all 0.3s ease;




}









.ytiw-social-card:hover {




    box-shadow: 0 8px 25px rgba(0,0,0,0.1);




}









.ytiw-social-card img {




    width: 100%;




    height: 180px;




    object-fit: cover;




}









.ytiw-social-body {




    padding: 20px;




}









.ytiw-social-body h5 {




    margin: 0 0 10px 0;




    font-size: 16px;




    font-weight: 700;




}









.ytiw-price {




    display: block;




    font-size: 22px;




    font-weight: 800;




    color: var(--ytiw-success);




    margin-bottom: 15px;




}









/* 9. Formulários e Botões */




.ytiw-copy-input {




    width: 100%;




    padding: 12px 15px;




    border: 1px solid var(--ytiw-border);




    border-radius: 8px;




    font-size: 14px;




    background: #fff;




    color: #333;




    transition: border-color 0.2s;




    box-sizing: border-box; /* Garante que o padding não estoure a largura */




}









.ytiw-copy-input:focus {




    border-color: var(--ytiw-primary);




    outline: none;




}









/* Fix para Selects Cortados */




select.ytiw-copy-input {




    height: 45px;




    line-height: normal;




}









.ytiw-button {




    background: var(--ytiw-primary);




    color: #fff;




    border: none;




    padding: 14px 28px;




    border-radius: 8px;




    font-weight: 700;




    font-size: 14px;




    cursor: pointer;




    transition: all 0.2s;




    text-align: center;




    text-decoration: none;




    display: inline-block;




}









.ytiw-button:hover {




    background: var(--ytiw-primary-dark);




    transform: translateY(-1px);




}









.ytiw-button.small {




    padding: 8px 16px;




    font-size: 12px;




}









.ytiw-button.outline {




    background: transparent;




    border: 2px solid var(--ytiw-primary);




    color: var(--ytiw-primary);




}









.ytiw-button.whatsapp-btn {




    background: #25D366;




    display: flex;




    align-items: center;




    justify-content: center;




    gap: 8px;




}









.ytiw-button.whatsapp-btn:hover {




    background: #128c7e;




}









/* 10. Status Pills */




.ytiw-status-pill {




    padding: 4px 12px;




    border-radius: 20px;




    font-size: 10px;




    font-weight: 800;




    text-transform: uppercase;




}









.ytiw-status-pill.success { background: #d4edda; color: #155724; }




.ytiw-status-pill.warning { background: #fff3cd; color: #856404; }




.ytiw-status-pill.danger { background: #f8d7da; color: #721c24; }









/* 11. Tabelas de Listagem Mini */




.ytiw-nexus-table-mini {




    width: 100%;




    border-collapse: collapse;




    font-size: 13px;




}









.ytiw-nexus-table-mini th {




    text-align: left;




    padding: 12px 10px;




    border-bottom: 2px solid var(--ytiw-border);




    color: var(--ytiw-gray);




    font-weight: 700;




}









.ytiw-nexus-table-mini td {




    padding: 12px 10px;




    border-bottom: 1px solid #f0f0f1;




}









/* 12. Criativos */




.ytiw-creatives-grid {




    display: grid;




    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));




    gap: 20px;




}









.ytiw-creative-item {




    border: 1px solid var(--ytiw-border);




    padding: 15px;




    border-radius: 12px;




    background: #fafafa;




}









.ytiw-copy-area {




    width: 100%;




    height: 120px;




    padding: 12px;




    border-radius: 8px;




    border: 1px solid var(--ytiw-border);




    font-family: monospace;




    font-size: 12px;




    margin-bottom: 10px;




    resize: none;




}









/* 13. Login Legacy (Compatibilidade) */




.ytiw-login-wrap {




    max-width: 450px;




    margin: 40px auto;




    background: #fff;




    padding: 30px;




    border-radius: 12px;




    box-shadow: 0 5px 15px rgba(0,0,0,0.08);




    border: 1px solid var(--ytiw-border);




    padding-bottom: 40px; /* Espaço para o reCaptcha */




}









.ytiw-login-wrap h3 {




    margin-bottom: 20px !important;




}









.ytiw-login-wrap p {




    margin-bottom: 15px;




}









.ytiw-login-wrap label {




    display: block;




    margin-bottom: 5px;




    font-weight: 600;




    color: var(--ytiw-gray);




}









.ytiw-login-wrap input[type="text"],




.ytiw-login-wrap input[type="password"] {




    width: 100%;




    padding: 12px;




    border: 1px solid var(--ytiw-border);




    border-radius: 6px;




    box-sizing: border-box;




    font-size: 16px;




}









.ytiw-login-wrap input[type="submit"] {




    background: var(--ytiw-primary);




    color: #fff;




    border: none;




    width: 100%;




    padding: 12px;




    border-radius: 6px;




    font-size: 16px;




    font-weight: bold;




    cursor: pointer;




    transition: background 0.2s;




    margin-top: 10px;




}









.ytiw-login-wrap input[type="submit"]:hover {




    background: var(--ytiw-primary-dark);




}









/* 14. Novo Módulo de Auth e 2FA (v3.2) */




.ytiw-auth-container {




    max-width: 420px;




    margin: 40px auto;




    background: #fff;




    padding: 35px;




    border-radius: 12px;




    box-shadow: 0 10px 30px rgba(0,0,0,0.08);




    border: 1px solid var(--ytiw-border);




    font-family: inherit;




}









.ytiw-auth-header {




    text-align: center;




    margin-bottom: 30px;




}









.ytiw-auth-header h3 {




    margin: 15px 0 10px 0;




    color: #333;




    font-size: 22px;




}









.ytiw-auth-header p {




    color: var(--ytiw-gray);




    font-size: 14px;




    line-height: 1.5;




}









.ytiw-form-group {




    margin-bottom: 20px;




}









.ytiw-form-group label {




    display: block;




    margin-bottom: 8px;




    font-weight: 600;




    font-size: 14px;




    color: #444;




}









.ytiw-input {




    width: 100%;




    padding: 12px 15px;




    border: 1px solid #ced4da;




    border-radius: 6px;




    font-size: 15px;




    transition: border-color 0.2s;




    box-sizing: border-box;




}









.ytiw-input:focus {




    border-color: var(--ytiw-primary);




    outline: none;




    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);




}









.ytiw-input.large-center {




    font-size: 24px;




    text-align: center;




    letter-spacing: 5px;




    padding: 15px;




    font-family: monospace;




}









.ytiw-form-footer {




    display: flex;




    align-items: center;




    justify-content: space-between;




    margin-top: 25px;




}









.ytiw-form-footer.center {




    justify-content: center;




}









.ytiw-form-footer .full-width {




    width: 100%;




}









.ytiw-form-links {




    margin-top: 20px;




    text-align: center;




    font-size: 13px;




}









.ytiw-form-links a {




    color: var(--ytiw-primary);




    text-decoration: none;




}









.ytiw-form-links a:hover {




    text-decoration: underline;




}









/* Alertas de Feedback no Auth */




.ytiw-alert {




    padding: 12px 15px;




    border-radius: 6px;




    margin-bottom: 20px;




    font-size: 14px;




    border: 1px solid transparent;




}




.ytiw-alert.ytiw-danger { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }




.ytiw-alert.ytiw-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }




.ytiw-alert.ytiw-info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }




.ytiw-alert.ytiw-warning { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }









/* Responsividade Auth */




@media (max-width: 480px) {




    .ytiw-auth-container {




        margin: 20px 15px;




        padding: 25px;




    }




    .ytiw-login-wrap {




        margin: 20px;




        padding: 20px;




    }




}