body {
    font-family: Arial, sans-serif;
    background: #f2f2f2;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
}

button {
    all: unset;
}

h2 {
    color: #2c3e50;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 900px;
    margin: auto;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

label { display: block; margin-top: 15px; font-weight: bold; }
input, select, textarea { width: 98%; padding: 8px; margin-top: 5px; border-radius: 4px; border: 1px solid #ccc; }

input[type="checkbox"] , input[type="radio"] {
    margin-top: 10px;
    width: auto;
}

input[type="checkbox"] + label, input[type="radio"] + label {
    display: inline;
}

table { margin-top: 15px; width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 5px 10px; border: 1px solid #ccc; text-align: left; }
th { background: #3498db; color: white; }

ul { list-style: none; padding-left: 0; text-align: left; }
li { background: #ecf0f1; margin: 5px 0; padding: 10px; border-radius: 5px; }

.container {
    width: auto;
    padding: 30px 20px 0 20px;
}

.secao{
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
}

.inline-form {
    display: flex;
    gap: 20px;
    align-items: center;
}

.inline-form input, .inline-form select, .inline-form textarea 
{ 
    width: 98%; 
    padding: 8px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #2c3e50;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    font-size: 14px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.btn {
    display: inline-block;
    margin: 15px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

.btn-md {
    display: inline-block;
    margin: 10px;
    padding: 12px 20px;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
}

.btn-sm {
    display: inline-block;
    padding: 6px 12px !important;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.primary {
    background-color: #3498db;
}

.secondary {
    background-color: #9b59b6;
}

.info {
    background-color: #16a085;
}

.light {
    background-color: #7f8c8d;
}

.warning {
    background-color: #f39c12;
}

.danger{
    background-color: #c0392b;
}

.success{
    background-color: #27ae60;
}

.message-success { color: #27ae60; font-weight: bold; margin-bottom: 15px; }
.message-warning { color: #f39c12; font-weight: bold; margin-bottom: 15px; }
.message-danger { color: #c0392b; font-weight: bold; margin-bottom: 15px; }

.modal { display:none; position:fixed; top:10%; left:20%; width:60%; background:#fff; border:1px solid #ccc; padding:20px; z-index:1000; max-height:70%; overflow-y:auto; border-radius:8px; box-shadow:0 0 15px rgba(0,0,0,0.3); }
.modal-header { font-weight:bold; margin-bottom:10px; }
.modal-footer { margin-top:15px; text-align:right; }
.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999; }

.hint { font-size: 12px; color: #7f8c8d; margin-top: 4px; }
.hidden { display: none; }