/* --- 1. CONTROLES DE OPERAÇÃO (COMPRA/VENDA) --- */
.op-selector { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 12px; 
}

.op-btn { 
    flex: 1; 
    padding: 12px 5px; 
    border: none; 
    background: var(--bg-input); 
    color: var(--text-muted); 
    cursor: pointer; 
    border-radius: var(--radius-main); 
    font-weight: bold; 
    font-size: 13px; 
    text-transform: uppercase; 
}

/*
.active-compra { 
    background-color: var(--op-compra) !important; 
    color: var(--ajuda-seletor-s) !important; 
border-color: #ccff00;27ae60
}

.active-venda { 
    background-color: var(--op-venda) !important; 
    color: var(--ajuda-seletor-s) !important; 
border-color: #ff4d4d;e74c3c
}*/

.active-compra { 
    background-color: var(--op-compra) !important; 
    color: var(--ajuda-seletor-s) !important; 
    border: 2px solid #27ae60 !important; /* Adicionado '2px solid' */
}

.active-venda { 
    background-color: var(--op-venda) !important; 
    color: var(--ajuda-seletor-s) !important; 
    border: 2px solid #e74c3c !important; /* Adicionado '2px solid' */
}

/* --- 2. ESTRUTURA DO FORMULÁRIO --- */
.section-title { 
    font-size: 0.9rem; 
    color: var(--primary-color); 
    margin: 12px 0 6px 0; 
    border-bottom: 1px solid var(--border-main); 
    padding-bottom: 3px; 
    font-weight: bold; 
    text-transform: uppercase; 
}

.row { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 6px; 
    width: 100%; 
    align-items: center; 
}

.b3-page input {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-main);
    background-color: var(--bg-input);
    color: var(--text-white);
    font-size: 15px;
    outline: none;
}

.b3-page input[type="checkbox"] { 
    width: 24px; 
    height: 24px; 
    cursor: pointer; 
    accent-color: var(--primary-color); 
    flex: none; 
}

/* Larguras específicas dos campos */
#days { flex: 1; font-size: 13px; }
#irate { flex: 2; font-size: 13px; }
#notes { flex: 4; font-size: 13px; }

/* --- 3. BOTÕES DE AÇÃO --- */
.actions { 
    display: flex; 
    gap: 10px; 
    margin-top: 15px; 
}

button.main-btn { 
    flex: 1; 
    padding: 14px; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: var(--radius-main); 
    font-size: 14px; 
    text-transform: uppercase; 
}

.btn-calc { 
    background-color: var(--primary-color); 
    color: var(--text-dark); 
}

.btn-clear { 
    background-color: var(--border-main); 
    color: var(--text-white); 
}

/* --- 4. EXIBIÇÃO DE RESULTADOS --- */
.result-box { 
    margin-top: 15px; 
    padding: 12px; 
    background-color: var(--bg-highlight); 
    border-radius: 10px; 
    border-left: 5px solid var(--primary-color); 
}

.res-line { 
    display: flex; 
    justify-content: space-between; 
    margin: 5px 0; 
    font-size: 15px; 
}

.val { 
    color: var(--text-white); 
    font-weight: bold; 
}

.profit { color: var(--op-profit); }
.loss { color: var(--accent-red-light); }

.sub-info { 
    font-size: 14px; 
    color: var(--text-gray); 
    border-top: 1px solid var(--border-light); 
    padding-top: 8px; 
    margin-top: 8px; 
    font-weight: 500; 
}

.interest-info { 
    font-size: 13px; 
    color: var(--text-yellow);
    margin-top: 5px; 
    border-top: 1px dashed var(--border-light); 
    padding-top: 5px; 
}

.breakeven-info { 
    color: var(--brand-blue); 
    font-weight: bold; 
    border-top: 1px solid var(--border-light); 
    margin-top: 8px; 
    padding-top: 8px; 
    justify-content: center; 
}

/* --- 5. DOCUMENTAÇÃO (TRADEB3.HTML) --- */
.doc-section { 
    background: var(--bg-container); 
    padding: 15px; 
    border-radius: var(--radius-large); 
    border: 1px solid var(--border-main); 
    margin-bottom: 15px; 
    line-height: 1.6; 
    border-left: 4px solid var(--primary-color); 
}

.highlight { 
    color: var(--text-white); 
    font-weight: bold; 
}

.code-tag { 
    background: var(--border-main); 
    color: var(--brand-blue); 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-family: monospace; 
    font-size: 1.0rem; 
}

.exemplo-box { 
    background: var(--iten-alert-bg); /* Mantido para contraste interno de documentação */
    border: 1px dashed var(--border-light); 
    padding: 12px; 
    margin-top: 10px; 
    border-radius: 6px; 
    font-size: 1.0rem; 
    color: var(--text-gray); 
}

.exemplo-box span{ 
font-weight: bold; 
}

/* Container dos Cards */
#detalhesCarteira {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os monitores */
    padding: 10px 0;
}

/* O Card Individual */
.card-monitor {
    background: var(--bg-container);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-main);
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.monitor-id {
    font-weight: bold;
    font-size: 16px; /* Aumentado */
    color: var(--primary-color);
}

/* Badges de Operação */
.badge-compra, .badge-venda {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    color: #fff;
}
.badge-compra { background: var(--op-compra); }
.badge-venda { background: var(--op-venda); }

.card-body {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.info-group label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.info-group span {
    font-size: 14px; /* Aumentado */
    font-weight: 600;
    color: var(--text-white);
}

.card-footer-latente {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
}

/* Estilo do Resumo Final */
.resumo-investido {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 5px;
}

/* Container do Resumo Final */
.resumo-total {
    font-size: 14px; 
    font-weight: bold;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Usa a cor padrão do sistema que já inverte no tema */
    color: var(--h2-color); 
}

/* Valor do Saldo */
#totalCarteira span {
    white-space: nowrap;
    margin-left: auto;
}

/* Cores de resultado usando suas variáveis do root.css */
#totalCarteira .profit { 
    color: var(--op-profit); 
}

#totalCarteira .loss { 
    color: var(--accent-red-light); 
}

/* Ajuste do nome do Monitor para seguir seu padrão de títulos */
#detalhesCarteira b {
    color: var(--primary-color);
    font-size: 14px;
    text-transform: uppercase;
}

/* Formatação do link do Monitor */
.card-monitor a {
    text-decoration: none;            /* Remove o sublinhado */
    color: var(--primary-color);      /* Usa a cor principal do seu tema */
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.card-monitor a:hover {
    filter: brightness(1.2);          /* Dá um brilho ao passar o mouse */
    transform: translateX(3px);       /* Move levemente para a direita */
}

/* Para garantir que o ícone ou o texto não herdem cores estranhas */
.card-monitor a:visited {
    color: var(--primary-color);
}