/* style.css */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f4f7f9; color: #333; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
header { background-color: #1a73e8; color: white; padding: 15px 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; z-index: 10; }
h1 { margin: 0; font-size: 24px; }
main { display: flex; flex-grow: 1; overflow: auto; }
.btn { background-color: #1a73e8; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; width: 100%; margin-bottom: 15px; }
.btn:hover { background-color: #1558b0; }
.btn:disabled { background-color: #cccccc; color: #888888; cursor: not-allowed; }
.btn-secondary { background-color: #e8f0fe; color: #1a73e8; width: auto; margin-bottom: 0; }
.btn-secondary:hover { background-color: #d2e3fc; }
.btn-small { background-color: #5f6368; padding: 5px 10px; font-size: 12px; margin: 0; width: auto; }
.btn-small:hover { background-color: #3c4043; }
.btn-edit { background-color: #ffab00; } .btn-edit:hover { background-color: #e69100; }
.btn-delete { background-color: #d93025; } .btn-delete:hover { background-color: #c2251b; }
.page { display: none; width: 100%;}
.page.active { display: flex; }
#app-container { display: flex; flex-direction: column; width: 100%; height: 100vh; }

.main-content-campaigns { padding: 30px; width: 100%; box-sizing: border-box; }
.campaigns-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }
.campaigns-header h2 { margin: 0; }
.campaigns-header .btn { margin-bottom: 0; width: auto; }

#groups-list, #campaigns-list { list-style-type: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.group-item, .campaign-item { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s; }
.group-item:hover, .campaign-item:hover { background-color: #f8f9fa; }
.group-item.active, .campaign-item.active { background-color: #e8f0fe; border-color: #1a73e8; }
.group-info { flex-grow: 1; display: flex; align-items: baseline; gap: 10px; }
.group-name { font-weight: bold; font-size: 18px; }
.group-campaigns-count { font-size: 14px; color: #5f6368; }
.campaign-item { border-left: 3px solid #1a73e8; }
.campaign-item > div { display: flex; flex-direction: column; gap: 4px; }
.campaign-date { font-size: 12px; color: #5f6368; }

#campaigns-and-details-container { display: flex; gap: 20px; }
#campaigns-list-container { flex: 1; }
#campaign-details-container { flex: 2; padding: 20px; background-color: #f0f0f0; border-radius: 8px; }
#welcome-message { text-align: center; color: #777; padding-top: 50px; }
.campaign-content { display: none; }
.campaign-content.visible { display: block; }
.campaign-content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.campaign-content-header h3 { margin: 0; }

.asset-list-item { background-color: #fff; padding: 15px; border-radius: 4px; margin-bottom: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.sub-asset-item { background-color: #f8f9fa; padding: 10px 15px 10px 30px; border-radius: 4px; margin-bottom: 5px; margin-left: 20px; border-left: 3px solid #1a73e8; }
.sub-asset-header { display: flex; justify-content: space-between; align-items: center; }
.asset-list-item .asset-name, .sub-asset-item .asset-name { font-weight: bold; display: block; }
.param-chips-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.param-chip { background-color: #e9ecef; color: #495057; font-size: 11px; padding: 3px 8px; border-radius: 12px; }
.param-chip-key { font-weight: 600; }
.asset-form-static, .asset-form { margin-top: 20px; padding: 20px; background-color: #f0f0f0; border-radius: 5px; }
.asset-form { padding: 0; background-color: transparent; margin-top: 0; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
#custom-url-group, #custom-content-group { display: none; margin-top: 10px; }
.actions-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
#parameters-page-container { display: flex; width: 100%; padding: 30px; gap: 20px; flex-wrap: wrap; }
.parameter-section { flex: 1 1 300px; }
.parameter-section h4 { margin-top: 0; }
.parameter-list { list-style-type: none; padding: 0; }
.parameter-list-item { display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 10px; border-radius: 4px; margin-bottom: 8px; font-family: 'Courier New', Courier, monospace;}
#products-page-container { padding: 30px; width: 100%;}
#products-list { margin-top: 20px; }
.product-item { display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 15px; border-radius: 4px; margin-bottom: 10px; }
.product-item span { font-family: 'Courier New', Courier, monospace; }
.product-item .actions { display: flex; gap: 10px; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal-box { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 90%; max-width: 600px; text-align: left; }
.modal-box h2 { text-align: center; margin-top: 0; }
#modal-content { max-height: 70vh; overflow-y: auto; padding: 10px; }
#modal-prompt-area { display: none; margin: 20px 0; }
#modal-input, .modal-input { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 15px; }
.body-noscroll { overflow: hidden; }
.form-group-label { display: flex; align-items: center; gap: 8px; }
.tooltip-trigger { display: inline-block; width: 18px; height: 18px; background-color: #a0aec0; color: white; border-radius: 50%; text-align: center; font-size: 12px; font-weight: bold; line-height: 18px; cursor: help; position: relative; }
.tooltip-trigger::before { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #2d3748; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: normal; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; z-index: 10; }
.tooltip-trigger::after { content: ''; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%) translateY(16px); border: 8px solid transparent; border-top-color: #2d3748; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; z-index: 10; }
.tooltip-trigger:hover::before, .tooltip-trigger:hover::after { opacity: 1; visibility: visible; }
.asset-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 10px; align-items: flex-start;}
.asset-date { font-size: 13px; color: #333; padding: 3px 8px; border-radius: 12px; background-color: #f0f0f0; margin-left: auto; order: 1;}
.external-id-chip { background-color: #d1fae5; color: #065f46; font-family: 'Courier New', Courier, monospace; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 12px; order: 2; }

#auth-page { justify-content: center; align-items: center; height: 100vh; background-color: #f4f7f9; }
.auth-container { width: 100%; max-width: 400px; padding: 40px; background-color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; text-align: center; }
.auth-container h1 { color: #1a73e8; }
.auth-form { margin-top: 20px; text-align: left; }
.auth-toggle { margin-top: 15px; font-size: 14px; text-align: center; }
.auth-toggle a { color: #1a73e8; font-weight: bold; text-decoration: none; cursor: pointer; }

/* ATUALIZAÇÃO: Estilos para o formulário de nova campanha */
.radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.radio-group label {
    font-weight: normal;
}
.radio-group input[type="radio"] {
    width: auto;
    margin-right: 10px;
    margin-bottom: 0;
}