/**
 * ConectePesquisa - Folha de Estilos Principal
 * 
 * Estilos para sistema de gerenciamento de ofertas e procuras
 * de pesquisas e disciplinas de pós-graduação.
 * 
 * Estrutura:
 * - Variáveis CSS
 * - Reset e configurações básicas
 * - Componentes de layout (header, footer, container)
 * - Modais e formulários
 * - Cards de ofertas/procuras
 * - Mapa interativo do Brasil
 * - Responsividade
 */

/* ================================
   VARIÁVEIS CSS GLOBAIS
   Definem cores, fontes e espaçamentos
   reutilizáveis em todo o sistema
   ================================ */
:root {
    /* Cores Principais */
    --color-primary: #4A90E2;
    --color-text: #333;
    --color-bg: #f8f9fa;
    
    /* Cores de Ações */
    --color-oferecer: #00a366;
    --color-oferecer-hover: #007a3d;
    --color-procurar: #ed7d31;
    --color-procurar-hover: #d35400;
    --color-mapa: #0094d9;
    --color-mapa-hover: #007bb3;
    
    /* Fontes */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --line-height-base: 1.6;
    
    /* Espaçamentos */
    --padding-container: 30px;
    --border-radius: 10px;
    --shadow-card: 0 2px 10px rgba(0,0,0,0.1);
}

/* ================================
   RESET E CONFIGURAÇÕES BÁSICAS
   Reset CSS universal e configuração
   de box-sizing para layout consistente
   ================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * ACESSIBILIDADE - Indicadores de Foco
 * 
 * Fornece indicadores visuais para usuários de teclado
 * usando :focus-visible (navegadores modernos)
 */
button:focus-visible,
a:focus-visible,
.btn:focus-visible {
    outline: 2px solid rgba(0, 148, 217, 0.5);
    outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 1px rgba(74, 144, 226, 0.5);
}

/**
 * Remove outline apenas para cliques de mouse
 * Mantém acessibilidade para teclado intacta
 */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * Container principal
 * Centraliza conteúdo e define largura máxima
 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ================================
   HEADER
   Cabeçalho com gradiente roxo e
   informações do sistema
   ================================ */
header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/**
 * Espaçamento para botões no header
 */
header .btn {
    margin-top: 20px;
}
header h1 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
/* Reduzir tamanho dos títulos */
h2 {
    font-size: 1.2rem;
}
h3 {
    font-size: 1.1rem;
}
header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ================================
   MODAIS
   Sistema de modais overlay para login,
   cadastro e recuperação de senha
   ================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
}
.modal-content h2 {
    margin-bottom: 20px;
    color: #333;
}
/* Botão de fechar modal */
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.modal-close:hover {
    background-color: #f5f5f5;
    color: #333;
}

/* ================================
   BOTÕES
   Estilos para botões de ação primários,
   secundários e de navegação
   ================================ */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 5px;
}

/* Espaçamento adicional para botões de ação dos formulários */
.form-cadastro .btn {
    margin-top: 25px;
}

/* Reduzir espaçamento após textarea */
.form-group:has(textarea) {
    margin-bottom: 10px;
}
/* Botões do cabeçalho (Sair, Voltar) */
.btn-header {
    background-color: #6c757d;
    color: white;
    padding: 8px 16px;
    font-size: 14px;
}
.btn-header:hover {
    background-color: #5a6268;
}
/* Botões com cores temáticas usando variáveis */
.btn-nova-oferta,
.btn-oferecer {
    background-color: var(--color-oferecer);
    color: white;
    padding: 10px 20px;
    font-size: 15px;
}
.btn-nova-oferta:hover,
.btn-oferecer:hover {
    background-color: var(--color-oferecer-hover);
}

.btn-nova-procura,
.btn-procurar {
    background-color: var(--color-procurar);
    color: white;
    padding: 10px 20px;
    font-size: 15px;
}
.btn-nova-procura:hover,
.btn-procurar:hover {
    background-color: var(--color-procurar-hover);
}

.btn-mapa {
    background-color: var(--color-mapa);
    color: white;
    padding: 10px 20px;
    font-size: 15px;
}
.btn-mapa:hover {
    background-color: var(--color-mapa-hover);
}
/* Botões de ação principal (Entrar, Cadastrar) */
.btn-action {
    background-color: #44749d;
    color: white;
    padding: 10px 20px;
    font-size: 15px;
}
.btn-action:hover {
    background-color: #3a5f7a;
}
/* Botões de ação nos cards */
.oferta-card .btn-editar {
    background-color: white;
    color: #00a366;
    border: 1px solid #9dd9c8;
}
.oferta-card .btn-editar:hover {
    background-color: #007a3d;
    color: white;
    border: 1px solid #007a3d;
}
.oferta-card .btn-excluir {
    background-color: white;
    color: #e74c3c;
    border: 1px solid #9dd9c8;
}
.oferta-card .btn-excluir:hover {
    background-color: #e74c3c;
    color: white;
    border: 1px solid #e74c3c;
}
.procura-card .btn-editar {
    background-color: white;
    color: #f39c12;
    border: 1px solid #f2d4a3;
}
.procura-card .btn-editar:hover {
    background-color: #e67e22;
    color: white;
    border: 1px solid #e67e22;
}
.procura-card .btn-excluir {
    background-color: white;
    color: #e74c3c;
    border: 1px solid #f2d4a3;
}
.procura-card .btn-excluir:hover {
    background-color: #e74c3c;
    color: white;
    border: 1px solid #e74c3c;
}

/* ================================
   FORMULÁRIOS
   Estilos para campos de input, textarea,
   select e grupos de formulário
   ================================ */

/**
 * Preservar quebras de linha na descrição
 * white-space: pre-wrap mantém formatação do usuário
 */
.descricao-texto {
    white-space: pre-wrap;
    display: inline;
}
/* Quando a descrição tem múltiplas linhas, colocar na linha abaixo */
.descricao-texto.multilinha {
    display: block;
    margin-top: 4px;
}
/* Centralizar texto do mapa */
.form-cadastro h2 {
    text-align: center;
}
/* Nota sobre campos obrigatórios */
.form-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}
/* Botões de navegação (Voltar, Sair) */
.btn-nav {
    background-color: #ebe7e0;
    color: #333;
    padding: 8px 16px;
    font-size: 14px;
}
.btn-nav:hover {
    background-color: #d4d0c7;
}
/* Classe utilitária para containers de cards */
.card-container,
.escolha-section,
.option-card,
.user-data,
.form-cadastro {
    background: white;
    padding: var(--padding-container);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card);
}

/* Seção de escolha inicial */
.escolha-section {
    margin: 30px 0;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
}
.escolha-content h2 {
    margin-bottom: 15px;
    color: #333;
}
.escolha-content p {
    margin-bottom: 25px;
    color: #666;
    font-size: 1.1rem;
}
/* Grid de Ações - Layout moderno com ícones */
.grid-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin: 25px auto;
    max-width: 600px;
}

.btn-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 95px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-grid:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    border-color: #4A90E2;
}

.btn-grid:active {
    transform: translateY(-2px);
}

.btn-grid-icon {
    font-size: 2.2em;
    margin-bottom: 6px;
    display: block;
}

.btn-grid-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 2px;
}

.btn-grid-subtitle {
    font-size: 0.8em;
    color: #666;
    display: block;
}

/* Cores específicas por tipo de ação usando variáveis */
.btn-grid-mapa {
    border-color: var(--color-mapa);
}
.btn-grid-mapa:hover {
    background: var(--color-mapa);
    border-color: var(--color-mapa);
}
.btn-grid-mapa:hover .btn-grid-title,
.btn-grid-mapa:hover .btn-grid-subtitle {
    color: white;
}

.btn-grid-oferecer {
    border-color: var(--color-oferecer);
}
.btn-grid-oferecer:hover {
    background: var(--color-oferecer);
    border-color: var(--color-oferecer);
}
.btn-grid-oferecer:hover .btn-grid-title,
.btn-grid-oferecer:hover .btn-grid-subtitle {
    color: white;
}

.btn-grid-procurar {
    border-color: var(--color-procurar);
}
.btn-grid-procurar:hover {
    background: var(--color-procurar);
    border-color: var(--color-procurar);
}
.btn-grid-procurar:hover .btn-grid-title,
.btn-grid-procurar:hover .btn-grid-subtitle {
    color: white;
}
.login-link {
    margin-top: 25px;
    font-size: 14px;
}
.login-link a {
    color: #007bff;
    text-decoration: none;
}
.login-link a:hover {
    text-decoration: underline;
}
/* Reduzir espaçamento entre links no modal de login */
.modal .login-link {
    margin-top: 10px;
    margin-bottom: 5px;
}
/* Reduzir espaçamento entre links na tela inicial */
.escolha-section .login-link {
    margin-top: 10px;
    margin-bottom: 5px;
}
.info-text {
    margin-top: 15px;
    color: #666;
}
/* Espaçamento para frases explicativas */
.info-text + .oferta-card,
.info-text + .procura-card {
    margin-top: 20px;
}
/* Espaçamento para títulos de seção */
.ofertas-container h3,
.procuras-container h3 {
    margin-bottom: 10px;
}
/* Espaçamento para frases explicativas */
.ofertas-container p,
.procuras-container p {
    margin-bottom: 20px;
    margin-top: 0;
}
/* Estilos base para campos de formulário */
.form-group input,
.form-group textarea,
.form-group select,
.form-cadastro input,
.form-cadastro textarea,
.form-cadastro select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s ease;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Formulários */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

/* Textarea específico */
.form-group textarea,
.form-cadastro textarea {
    resize: vertical;
    min-height: 100px;
}

/* Input e Select - mesma altura */
.form-group input,
.form-cadastro input {
    height: calc(1.5em + 24px + 2px);
}

/* Select específico */
.form-group select,
.form-cadastro select {
    background-color: white;
    cursor: pointer;
    height: calc(1.5em + 24px + 2px);
}
/* Focus state já definido globalmente (linhas 57-63) */

/* ================================
   MAPA DO BRASIL
   Mapa SVG interativo com estados clicáveis
   e sistema de cores por contagem
   ================================ */
#mapa-brasil {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Container do mapa com posição relativa para a legenda */
.form-cadastro {
    position: relative;
}

/* Legenda do mapa */
.legenda-mapa {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 250px;
    z-index: 10;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 1024px) {
    .legenda-mapa {
        position: static;
        width: 100%;
        margin: 20px 0;
    }
}
.legenda-mapa h3 {
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

.legenda-mapa span {
    font-size: 13px;
}
.legenda-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.legenda-item:last-child {
    margin-bottom: 0;
}
.legenda-cor {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}
#svg-map {
    max-width: 100%;
    height: auto;
}
#svg-map path {
    fill: var(--color-mapa);
    stroke: #FFFFFF;
    stroke-width: 1.0404;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.3s ease;
}
#svg-map path:hover {
    fill: #003399 !important;
}
#svg-map text {
    fill: #fff;
    font: 12px Arial-BoldMT, sans-serif;
    cursor: pointer;
}
/* Círculos - estilos base */
#svg-map .circle {
    fill: #66ccff !important;
    stroke: none !important;
    cursor: pointer;
    transition: fill 0.3s ease;
}
/* Círculos - hover */
#svg-map .circle:hover {
    fill: #003399 !important;
}
/* Círculos dentro de estados - estilos base */
#svg-map .estado .circle {
    fill: #66ccff !important;
    stroke: none !important;
    cursor: pointer;
    transition: fill 0.3s ease;
}
/* Círculos dentro de estados - hover */
#svg-map .estado:hover .circle {
    fill: #003399 !important;
}
/* Círculos dentro de estados - hover direto no círculo */
#svg-map .estado .circle:hover {
    fill: #003399 !important;
}
/* Estilos para estados (elementos <a> com classe .estado) */
#svg-map .estado {
    cursor: pointer;
    transition: fill 0.3s ease;
}
#svg-map .estado:focus-visible {
    outline: 2px solid rgba(0, 148, 217, 0.5);
    outline-offset: 2px;
}
#svg-map .estado path:not(.circle) {
    fill: var(--color-mapa);
    stroke: #FFFFFF;
    stroke-width: 1.0404;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}
#svg-map .estado:hover path:not(.circle) {
    fill: #003399 !important;
}
#svg-map .estado text {
    fill: #fff;
    font: 12px Arial-BoldMT, sans-serif;
    cursor: pointer;
    font-weight: normal;
}

/* Cores específicas para estados com dados usando variáveis */
#svg-map .estado.com-ofertas path:not(.circle) {
    fill: var(--color-oferecer) !important;
    stroke: #FFFFFF;
}
#svg-map .estado.com-procuras path:not(.circle) {
    fill: var(--color-procurar) !important;
    stroke: #FFFFFF;
}
#svg-map .estado.com-ambos path:not(.circle) {
    fill: #ee00aa !important;
    stroke: #FFFFFF;
}

/* Cores específicas para círculos dos estados com dados */
#svg-map .estado.com-ofertas .circle {
    fill: #00cc4a !important;
    stroke: #FFFFFF;
}
#svg-map .estado.com-procuras .circle {
    fill: #ffb366 !important;
    stroke: #FFFFFF;
}
#svg-map .estado.com-ambos .circle {
    fill: #ff88ee !important;
    stroke: #FFFFFF;
}

/* Hover para estados com dados usando variáveis */
#svg-map .estado.com-ofertas:hover path:not(.circle) {
    fill: var(--color-oferecer-hover) !important;
}
#svg-map .estado.com-procuras:hover path:not(.circle) {
    fill: var(--color-procurar-hover) !important;
}
#svg-map .estado.com-ambos:hover path:not(.circle) {
    fill: #aa0088 !important;
}

/* Hover para círculos dos estados com dados usando variáveis */
#svg-map .estado.com-ofertas:hover .circle {
    fill: var(--color-oferecer-hover) !important;
}
#svg-map .estado.com-procuras:hover .circle {
    fill: var(--color-procurar-hover) !important;
}
#svg-map .estado.com-ambos:hover .circle {
    fill: #aa0088 !important;
}

/* ================================
   CARDS DE OFERTAS E PROCURAS
   Cards expansíveis para exibição de
   ofertas e procuras (pesquisas e disciplinas)
   ================================ */
.resultados-container {
    margin-top: 30px;
}
.resultados-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}
/* Badge de Tipo (Apoio/Disciplina) */
.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.75em;
    color: #666;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* Ofertas (caixas azuis) */
.ofertas-container {
    margin-bottom: 30px;
}
.oferta-card {
    background-color: #c8ede0;
    border: 1px solid #9dd9c8;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.oferta-card:hover {
    box-shadow: 0 2px 6px rgba(157,217,200,0.75);
}
.oferta-card h3 {
    color: #333;
    margin-bottom: 10px;
}
.oferta-card .resumo {
    font-weight: bold;
    color: #333;
    font-size: 14px;
    padding-right: 120px;
}
.oferta-card .detalhes {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #9dd9c8;
}
.oferta-card.expandido .detalhes {
    display: block;
}
.oferta-card .detalhes p {
    margin: 5px 0;
    font-size: 14px;
}
/* Procuras (caixas laranjas) */
.procuras-container {
    margin-bottom: 15px;
}
.procura-card {
    background-color: #fce5bd;
    border: 1px solid #f2d4a3;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.procura-card:hover {
    box-shadow: 0 2px 6px rgba(242,212,163,0.75);
}
.procura-card h3 {
    color: #333;
    margin-bottom: 10px;
}
.procura-card .resumo {
    font-weight: bold;
    color: #333;
    font-size: 14px;
    padding-right: 120px;
}
.procura-card .detalhes {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f2d4a3;
}
.procura-card.expandido .detalhes {
    display: block;
}
.procura-card .detalhes p {
    margin: 5px 0;
    font-size: 14px;
}
/* Ações dos cards */
.card-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Cor específica para o traço das ações no card da procura */
.procura-card .card-actions {
    border-top: 1px solid #f2d4a3;
}

/* Cor específica para o traço das ações no card da oferta */
.oferta-card .card-actions {
    border-top: 1px solid #9dd9c8;
}
.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
}

/* ================================
   MENSAGENS DE FEEDBACK
   Alertas de sucesso, erro e informação
   com fade-out automático
   ================================ */
.mensagem {
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0 30px 0;
    text-align: center;
}
.mensagem.sucesso {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.mensagem.erro {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.mensagem.info {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}


/* Animação de fade out para mensagens */
.mensagem {
    transition: opacity 0.5s ease-out;
}
/* Cards informativos (não clicáveis) */
.card-informativo {
    cursor: default !important;
    pointer-events: none;
}
.card-informativo .resumo {
    font-weight: normal !important;
}
/* Centralizar texto */
.text-center {
    text-align: center;
}

/* ================================
   RESPONSIVIDADE
   Media queries para adaptação a diferentes
   tamanhos de tela (mobile, tablet, desktop)
   ================================ */
@media (min-width: 768px) {
    /* Grid de Ações */
    .grid-acoes {
        grid-template-columns: repeat(6, 1fr);
        max-width: 540px;
        gap: 12px;
    }
    
    .btn-grid {
        padding: 16px 12px;
        min-height: 115px;
    }
    
    .btn-grid-icon {
        font-size: 2.5em;
    }
    
    /* Primeira linha: cada card ocupa 2 colunas (total 6 colunas = 3 cards) */
    .btn-grid:nth-child(1),
    .btn-grid:nth-child(2),
    .btn-grid:nth-child(3) {
        grid-column: span 2;
    }
    
    /* Segunda linha: cards centralizados */
    .btn-grid:nth-child(4) {
        grid-column: 2 / span 2;
    }
    
    .btn-grid:nth-child(5) {
        grid-column: 4 / span 2;
    }
    
    /* Modais e Header */
    .modal-content {
        width: 400px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .escolha-section {
        padding-left: 50px;
        padding-right: 50px;
    }
    
    /* Dashboard */
    .dashboard-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        grid-template-columns: 2fr 1fr;
    }
}
@media (min-width: 1024px) {
    .container {
        padding: 40px;
    }
    
    .escolha-section {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    #svg-map {
        width: 450px;
        height: 460px;
    }
}
/* ================================
   ANIMAÇÕES
   Keyframes para loading, fade-in/out
   e transições suaves
   ================================ */

/**
 * Loading spinner
 * Animação de rotação infinita
 */
.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}
.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================
   DASHBOARD
   Interface do painel do usuário com
   lista de ofertas e procuras cadastradas
   ================================ */
.dashboard-content {
    margin-top: 35px;
}
.dashboard-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 35px;
}
.option-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.option-card h3 {
    margin-bottom: 15px;
    color: #333;
}
.option-card p {
    margin-bottom: 20px;
    color: #666;
    flex-grow: 1;
}
.user-data h2 {
    margin-bottom: 20px;
    color: #333;
}
/* Formulários */
.form-cadastro {
    width: 100%;
    margin: 0 auto;
}
.form-cadastro label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
.form-cadastro input,
.form-cadastro select,
.form-cadastro textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}
/* Focus state já definido em .form-group acima */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
/* Responsividade para dashboard já consolidada acima */
@media (min-width: 1024px) {
    .dashboard-options {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Estilos responsivos para textarea e select */
@media (max-width: 768px) {
    .form-group textarea {
        min-height: 80px;
        font-size: 16px; /* Evita zoom no iOS */
    }
    
    .form-group select {
        font-size: 16px; /* Evita zoom no iOS */
    }
}