:root {
     /* Configurações de Layout */
     --grid-gap: 20px;
     --container-max: 1200px;
     --transition: all 0.3s ease;
     --transition-speed: 0.3s;
     --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
     --radius: 4px;

     /* Cores Principais */
     --primary-color: #1c3faa;
     --primary-hover: #0f3eca;
     --bg-input: #ffffff;
     --border-color: #cccccc;
     --text-color: #333333;
     --text-color-dark: #2d3748;
     --text-color-light: #4a5568;
     --border-color-light: #edf2f7;

     /* Cores Semânticas (Alertas e Progress) */
     --bg-error: #fff5f5;
     --border-error: #feb2b2;
     --text-error: #c53030;
     --bg-info: #ebf8ff;
     --border-info: #bee3f8;
     --text-info: #2b6cb0;
     --bg-success: #f0fff4;
     --border-success: #c6f6d5;
     --text-success: #2f855a;
     --bg-warning: #fffaf0;
     --border-warning: #feebc8;
     --text-warning: #b7791f;
     --bg-normal: #f7fafc;
     --border-normal: #e2e8f0;
     --text-normal: #4a5568;
     --danger-color: #e24a4a;
     --danger-hover: #c53030;
     --neutral-color: #e2e8f0;
     --neutral-hover: #cbd5e0;

     /* Accordion */
     --acc-border: #e2e8f0;
     --acc-bg-hover: #f8fafc;
     --acc-text: #334155;

     /* Modal */
     --modal-bg: #ffffff;
     --modal-overlay-bg: rgba(0, 0, 0, 0.5);
     --modal-radius: 8px;
     --modal-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);

     /* Progress Bar */
     --pb-bg: #edf2f7;
     --pb-radius: 3px;
     --pb-height: 12px;
}

/* --- 22. TAGS PADRÕES (GLOBAL RESET & STYLE) --- */
* {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
}

body {
     margin: 0;
     font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background-color: #ffffff;
}

/* Tipografia */
h1,
h2,
h3,
h4,
h5,
h6 {
     margin-top: 0;
     margin-bottom: 0.5em;
     color: var(--text-color-dark);
     font-weight: 700;
}

p {
     margin-bottom: 1rem;
}

small {
     font-size: 0.8em;
     color: var(--text-color-light);
}

strong,
b {
     font-weight: 700;
}

/* Elementos de Citação e Código */
blockquote {
     margin: 20px 0;
     padding: 10px 20px;
     border-left: 4px solid var(--primary-color);
     background: var(--bg-normal);
     color: var(--text-color-light);
     font-style: italic;
}

code {
     font-family: 'Consolas', Monaco, monospace;
     background: var(--bg-normal);
     padding: 2px 4px;
     border-radius: 2px;
     font-size: 0.9em;
     color: var(--text-error);
}

pre {
     background: var(--text-color-dark);
     color: #f8f9fa;
     padding: 15px;
     border-radius: var(--radius);
     overflow-x: auto;
}

/* Tabelas Padrão */
table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 1rem;
}

table th,
table td {
     padding: 12px;
     text-align: left;
     border-bottom: 1px solid var(--border-normal);
}

table th {
     background-color: var(--bg-normal);
     color: var(--text-color-dark);
}

/* Figuras */
figure {
     margin: 0 0 1rem;
}

figcaption {
     font-size: 13px;
     color: var(--text-color-light);
     text-align: center;
     margin-top: 5px;
}

/* --- 23. TOOLTIP (CSS PURO) --- */
[data-tooltip] {
     position: relative;
     cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 1000;
     pointer-events: none;
}

/* O Balão */
[data-tooltip]::before {
     content: attr(data-tooltip);
     bottom: 125%;
     background: var(--text-color-dark);
     color: #fff;
     padding: 6px 10px;
     font-size: 12px;
     border-radius: var(--radius);
     white-space: nowrap;
     box-shadow: var(--modal-shadow);
}

/* A Setinha */
[data-tooltip]::after {
     content: "";
     bottom: 110%;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 6px solid var(--text-color-dark);
}

/* Hover State */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(-5px);
}

/* --- 1. LAYOUT & GRID SYSTEM --- */
.container {
     width: 100%;
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 15px;
     box-sizing: border-box;
}

.grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: var(--grid-gap);
}

.grid-auto {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--grid-gap);
}

/* Mobile First (12 colunas por padrão) */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
     grid-column: span 12;
}

@media (min-width: 768px) {
     .col-md-1 {
          grid-column: span 1;
     }

     .col-md-2 {
          grid-column: span 2;
     }

     .col-md-3 {
          grid-column: span 3;
     }

     .col-md-4 {
          grid-column: span 4;
     }

     .col-md-6 {
          grid-column: span 6;
     }

     .col-md-12 {
          grid-column: span 12;
     }
}

@media (min-width: 1024px) {
     .col-lg-1 {
          grid-column: span 1;
     }

     .col-lg-2 {
          grid-column: span 2;
     }

     .col-lg-3 {
          grid-column: span 3;
     }

     .col-lg-4 {
          grid-column: span 4;
     }

     .col-lg-6 {
          grid-column: span 6;
     }

     .col-lg-8 {
          grid-column: span 8;
     }

     .col-lg-9 {
          grid-column: span 9;
     }

     .col-lg-12 {
          grid-column: span 12;
     }
}

.align-center {
     align-items: center;
}

.text-center {
     text-align: center;
}

/* --- 2. FORM ELEMENTS --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
     width: 100%;
     padding: 12px 15px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     box-sizing: border-box;
     font-size: 16px;
     color: var(--text-color);
     background-color: var(--bg-input);
     transition: var(--transition);
     outline: none;
}

input:focus,
textarea:focus,
select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

textarea {
     resize: vertical;
     min-height: 100px;
}

/* Botões */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
     background-color: var(--primary-color);
     color: white;
     padding: 12px 24px;
     border: none;
     border-radius: var(--radius);
     cursor: pointer;
     font-size: 16px;
     font-weight: 600;
     transition: var(--transition);
     display: inline-block;
     text-align: center;
}

button:hover,
input[type="submit"]:hover {
     background-color: var(--primary-hover);
     transform: translateY(-1px);
     color: white;
}

button:active {
     transform: translateY(0);
}

/* Checkbox & Radio */
.container-check {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     margin: 10px 0;
     font-size: 16px;
}

input[type="checkbox"],
input[type="radio"] {
     width: 18px;
     height: 18px;
     cursor: pointer;
     accent-color: var(--primary-color);
}

/* --- 3. COMPONENTS (ALERTS & ACCORDION) --- */
.alert {
     padding: 12px 16px;
     margin-bottom: 12px;
     border: 1px solid;
     border-radius: var(--radius);
     font-family: sans-serif;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     line-height: 1.5;
}

.alert-error {
     background: var(--bg-error);
     border-color: var(--border-error);
     color: var(--text-error);
}

.alert-info {
     background: var(--bg-info);
     border-color: var(--border-info);
     color: var(--text-info);
}

.alert-success {
     background: var(--bg-success);
     border-color: var(--border-success);
     color: var(--text-success);
}

.alert-warning {
     background: var(--bg-warning);
     border-color: var(--border-warning);
     color: var(--text-warning);
}

.alert-normal {
     background: var(--bg-normal);
     border-color: var(--border-normal);
     color: var(--text-normal);
}

.accordion-container {
     max-width: 100%;
     border: 1px solid var(--acc-border);
     border-radius: var(--radius);
     overflow: hidden;
}

details {
     border-bottom: 1px solid var(--acc-border);
     background-color: #ffffff;
     transition: var(--transition);
}

details:last-child {
     border-bottom: none;
}

summary {
     padding: 14px 20px;
     list-style: none;
     cursor: pointer;
     font-weight: 500;
     color: var(--acc-text);
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: var(--transition);
     outline: none;
}

summary::-webkit-details-marker {
     display: none;
}

summary:hover {
     background-color: var(--acc-bg-hover);
}

summary::after {
     content: '+';
     font-size: 18px;
     font-weight: 300;
     transition: transform 0.3s ease;
}

details[open] summary {
     background-color: var(--acc-bg-hover);
     border-bottom: 1px solid var(--acc-border);
}

details[open] summary::after {
     transform: rotate(45deg);
}

.acc-content {
     padding: 16px 20px;
     font-size: 14px;
     color: #64748b;
     line-height: 1.6;
     background-color: #ffffff;
     animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(-5px);
     }

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

/* --- 4. MODAL --- */
.modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--modal-overlay-bg);
     backdrop-filter: blur(6px);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
     transition: opacity var(--transition-speed) var(--transition-ease),
          visibility var(--transition-speed) var(--transition-ease);
}

.modal-overlay.active {
     opacity: 1;
     visibility: visible;
}

.modal {
     background: var(--modal-bg);
     width: 90%;
     max-width: 500px;
     border-radius: var(--modal-radius);
     box-shadow: var(--modal-shadow);
     transform: translateY(20px) scale(0.95);
     transition: transform var(--transition-speed) var(--transition-ease);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     position: relative;
}

.modal-overlay.active .modal {
     transform: translateY(0) scale(1);
}

.modal-header {
     padding: 18px 25px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--border-color-light);
     background-color: #f7fafc;
}

.modal-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--text-color-dark);
     margin: 0;
}

.modal-close {
     background: none;
     border: none;
     font-size: 28px;
     color: #a0aec0;
     cursor: pointer;
     line-height: 1;
     transition: color 0.2s ease, transform 0.2s ease;
}

.modal-close:hover {
     color: var(--text-color-dark);
     transform: rotate(90deg);
}

.modal-body {
     padding: 25px;
     max-height: 70vh;
     overflow-y: auto;
     font-size: 15px;
     color: var(--text-color-light);
     line-height: 1.7;
}

.modal-footer {
     padding: 18px 25px;
     background-color: #f7fafc;
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     border-top: 1px solid var(--border-color-light);
}

.modal-button {
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     outline: none;
}

.modal-button.primary {
     background: var(--primary-color);
     color: white;
}

.modal-button.primary:hover {
     background: var(--primary-hover);
     transform: translateY(-1px);
}

.modal-button.danger {
     background: var(--danger-color);
     color: white;
}

.modal-button.danger:hover {
     background: var(--danger-hover);
     transform: translateY(-1px);
}

.modal-button.neutral {
     background: var(--neutral-color);
     color: var(--text-color-light);
}

.modal-button.neutral:hover {
     background: var(--neutral-hover);
     transform: translateY(-1px);
}

@media (max-width: 600px) {
     .modal-footer {
          flex-direction: column;
     }

     .modal-button {
          width: 100%;
     }
}

/* --- 5. PROGRESS BAR --- */
.progress-container {
     width: 100%;
     background-color: var(--pb-bg);
     border-radius: var(--pb-radius);
     overflow: hidden;
     margin-bottom: 20px;
     height: var(--pb-height);
     position: relative;
}

.progress-bar {
     height: 100%;
     border-radius: var(--pb-radius);
     transition: var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 10px;
     font-weight: bold;
}

.bg-primary {
     background-color: #4a90e2;
}

.bg-success {
     background-color: #48bb78;
}

.bg-warning {
     background-color: #ed8936;
}

.bg-error {
     background-color: #f56565;
}

.bg-info {
     background-color: #4299e1;
}

.bg-dark {
     background-color: #2d3748;
}

.progress-striped {
     background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
     background-size: 1rem 1rem;
}

.progress-animated {
     animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
     from {
          background-position: 1rem 0;
     }

     to {
          background-position: 0 0;
     }
}

.progress-xs {
     height: 4px;
}

.progress-sm {
     height: 8px;
}

.progress-lg {
     height: 20px;
}

/* --- 7. PAGINAÇÃO --- */
.pagination {
     display: flex;
     list-style: none;
     padding: 0;
     gap: 5px;
     justify-content: center;
     margin: 20px 0;
}

.page-item {
     display: inline-block;
}

.page-link {
     padding: 8px 14px;
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
     color: var(--text-color);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     transition: var(--transition);
     background: white;
     cursor: pointer;
}

.page-link:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
     background-color: var(--bg-info);
}

.page-item.active .page-link {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     color: white;
}

.page-item.disabled .page-link {
     opacity: 0.5;
     cursor: not-allowed;
     background-color: var(--bg-normal);
}

/* --- 8. SPINNER (LOADING) --- */
.spinner {
     width: 24px;
     height: 24px;
     border: 3px solid var(--pb-bg);
     border-top: 3px solid var(--primary-color);
     border-radius: 50%;
     /* Spinners geralmente são circulares, mas a borda segue o tom */
     animation: spin 0.8s linear infinite;
     display: inline-block;
}

.spinner-lg {
     width: 40px;
     height: 40px;
     border-width: 4px;
}

.spinner-sm {
     width: 16px;
     height: 16px;
     border-width: 2px;
}

@keyframes spin {
     to {
          transform: rotate(360deg);
     }
}

/* --- 9. NOTIFICAÇÕES FLUTUANTES (TOASTS) PREMIUM --- */
.toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 12px;
     pointer-events: none;
     /* Permite clicar no que está atrás se não houver toast */
}

.toast {
     pointer-events: auto;
     /* Reativa cliques para o toast em si */
     min-width: 320px;
     max-width: 400px;
     background: #ffffff;
     border-radius: var(--radius);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     border: 1px solid var(--border-normal);
     animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
}

.toast-content {
     padding: 16px;
     display: flex;
     align-items: flex-start;
     gap: 12px;
}

.toast-icon {
     font-size: 20px;
     flex-shrink: 0;
}

.toast-details {
     flex-grow: 1;
}

.toast-title {
     font-weight: 700;
     font-size: 14px;
     color: var(--text-color-dark);
     margin: 0 0 4px 0;
}

.toast-message {
     font-size: 13px;
     color: var(--text-color-light);
     margin: 0;
     line-height: 1.4;
}

.toast-close {
     background: none;
     border: none;
     color: #a0aec0;
     cursor: pointer;
     font-size: 18px;
     padding: 0;
     line-height: 1;
     transition: color 0.2s;
}

.toast-close:hover {
     color: var(--text-color-dark);
}

/* Barra de Progresso do Toast */
.toast-progress {
     height: 3px;
     width: 100%;
     background: rgba(0, 0, 0, 0.05);
     position: relative;
}

.toast-progress-bar {
     height: 100%;
     width: 100%;
     background: var(--primary-color);
     transform-origin: left;
}

/* Cores e Ícones por Tipo */
.toast.success {
     border-left: 4px solid var(--text-success);
}

.toast.success .toast-progress-bar {
     background: var(--text-success);
}

.toast.error {
     border-left: 4px solid var(--text-error);
}

.toast.error .toast-progress-bar {
     background: var(--text-error);
}

.toast.warning {
     border-left: 4px solid var(--text-warning);
}

.toast.warning .toast-progress-bar {
     background: var(--text-warning);
}

@keyframes slideInRight {
     from {
          transform: translateX(100%);
          opacity: 0;
     }

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

@keyframes shrink {
     from {
          transform: scaleX(1);
     }

     to {
          transform: scaleX(0);
     }
}

/* --- 10. LINKS --- */
.link {
     color: var(--primary-color);
     text-decoration: none;
     transition: var(--transition);
     border-bottom: 1px solid transparent;
}

.link:hover {
     border-bottom-color: var(--primary-color);
}

/* --- 11. VIDEOS (RESPONSIVO) --- */
.video-container {
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 Aspect Ratio */
     height: 0;
     overflow: hidden;
     border-radius: var(--radius);
     background: #000;
}

.video-container iframe,
.video-container video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* --- 12. LISTS --- */
.list {
     list-style: none;
     padding: 0;
     margin: 0;
}

.list-item {
     padding: 10px 0;
     border-bottom: 1px solid var(--border-normal);
     display: flex;
     align-items: center;
     gap: 10px;
}

.list-item:last-child {
     border-bottom: none;
}

/* --- 13. IMAGES --- */
.img-responsive {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius);
     display: block;
}

.img-thumbnail {
     padding: 4px;
     border: 1px solid var(--border-normal);
     background: #fff;
}

/* --- 14. LABEL / BADGE --- */
.label {
     display: inline-block;
     padding: 2px 8px;
     font-size: 12px;
     font-weight: 700;
     border-radius: 2px;
     text-transform: uppercase;
}

.label-primary {
     background: var(--bg-info);
     color: var(--text-info);
}

.label-success {
     background: var(--bg-success);
     color: var(--text-success);
}

/* --- 15. DROPNAV (DROPDOWN) --- */
.dropdown {
     position: relative;
     display: inline-block;
}

.dropnav-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     box-shadow: var(--modal-shadow);
     z-index: 100;
     border-radius: var(--radius);
     border: 1px solid var(--border-normal);
}

.dropdown:hover .dropnav-content {
     display: block;
}

.dropnav-item {
     padding: 12px 16px;
     color: var(--text-color);
     text-decoration: none;
     display: block;
}

.dropnav-item:hover {
     background: var(--bg-normal);
}

/* --- 16. DIVIDER --- */
.divider {
     height: 1px;
     background: var(--border-normal);
     margin: 20px 0;
     border: none;
}

.divider-text {
     display: flex;
     align-items: center;
     text-align: center;
}

.divider-text::before,
.divider-text::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid var(--border-normal);
}

.divider-text span {
     padding: 0 10px;
     color: var(--text-color-light);
     font-size: 14px;
}

/* --- 17. DESCRIPTION (DEFINITION LIST) --- */
.description-list dt {
     font-weight: 700;
     color: var(--text-color-dark);
     margin-top: 10px;
}

.description-list dd {
     margin-left: 0;
     color: var(--text-color-light);
     font-size: 14px;
}

/* --- 18. COUNTDOWN --- */
.countdown {
     display: flex;
     gap: 15px;
}

.countdown-item {
     text-align: center;
}

.countdown-val {
     display: block;
     font-size: 24px;
     font-weight: 800;
     background: var(--text-color-dark);
     color: #fff;
     padding: 10px;
     border-radius: var(--radius);
     min-width: 50px;
}

.countdown-label {
     font-size: 10px;
     text-transform: uppercase;
     margin-top: 5px;
}

/* --- 19. COMMENTS --- */
.comment {
     display: flex;
     gap: 15px;
     margin-bottom: 20px;
}

.comment-avatar {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: var(--border-normal);
}

.comment-body {
     flex: 1;
     padding: 15px;
     background: var(--bg-normal);
     border-radius: var(--radius);
}

.comment-author {
     font-weight: 700;
     font-size: 14px;
     margin-bottom: 5px;
}

/* --- 20. BREADCRUMB --- */
.breadcrumb {
     display: flex;
     gap: 10px;
     list-style: none;
     padding: 0;
     font-size: 14px;
}

.breadcrumb-item+.breadcrumb-item::before {
     content: '/';
     color: var(--text-color-light);
     padding-right: 6px;
}

.breadcrumb-item a {
     color: var(--primary-color);
     text-decoration: none;
}

/* --- 21. ARTICLE --- */
.article {
     line-height: 1.8;
     color: var(--text-color);
}

.article-header {
     margin-bottom: 20px;
}

.article-title {
     font-size: 32px;
     margin-bottom: 10px;
}

.article-meta {
     font-size: 13px;
     color: var(--text-color-light);
     margin-bottom: 20px;
}