/* Tema Claro */
body.tema-claro {
   --cor-fundo: #f8f9fa;
   --cor-texto: #2d3436;
   --cor-header: linear-gradient(to left, #ffa07a, #ff9900);
   --cor-section: #ffffff;
   --borda-section: #e0e0e0;
   --cor-botao: #ff7675;
   --cor-botao-hover: #ff5252;
   --cor-botao-escuro: #6c757d;
 }

 /* Tema Escuro */
 body.tema-escuro {
   --cor-fundo: #2d3436;
   --cor-texto: #dfe6e9;
   --cor-header: linear-gradient(to right, #FF9900, #FFA07A);
   --cor-section: #404040;
   --borda-section: #555555;
   --cor-botao: #e17055;
   --cor-botao-hover: #d35400;
   --cor-botao-escuro: #4a4a4a;
 }

 /* Estilos Base */
 body {
   font-family: 'Segoe UI', Arial, sans-serif;
   background: var(--cor-fundo);
   color: var(--cor-texto);
   transition: all 0.3s ease;
   min-height: 100vh;
 }
 
 header {
   background: var(--cor-header);
   padding: 1.5rem;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
 main {
   max-width: 800px;
   margin: 0 auto;
   padding: 1rem;
 }
 
 section {
   background: var(--cor-section);
   border: 1px solid var(--borda-section);
   border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 3px 15px rgba(0,0,0,0.1);
 }
 
 /* Componentes Interativos */
 button {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #adicionar, #sortear {
   background: var(--cor-botao);
   color: white;
   border: none;
   padding: 0.8rem 1.5rem;
   border-radius: 8px;
   cursor: pointer;
 }
 
 #adicionar:hover, #sortear:hover {
   background: var(--cor-botao-hover);
   transform: translateY(-1px);
 }
 
 .btn-toggle-tema {
   background: var(--cor-botao-escuro);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 25px;
   border: none;
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 1000;
 }
 
 /* Lista de Atletas */
 #atletas-cadastrados div {
   padding: 1rem;
   margin: 0.5rem 0;
   background: var(--cor-section);
   border: 1px solid var(--borda-section);
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
 /* Times */
 .time {
   background: var(--cor-section);
   border: 1px solid var(--borda-section);
   border-radius: 12px;
   padding: 1rem;
   margin-bottom: 1rem;
 }
 
 .time li {
   padding: 0.5rem;
   border-bottom: 1px solid var(--borda-section);
 }
 
 /* Inputs */
 input {
   background: var(--cor-section);
   color: var(--cor-texto);
   border: 1px solid var(--borda-section);
   padding: 0.8rem;
   border-radius: 8px;
   width: 100%;
   box-sizing: border-box;
 }
 
 /* Responsividade */
 @media (max-width: 768px) {
   main {
     padding: 0.5rem;
   }
 
   section {
     padding: 1rem;
   }
 
   .btn-toggle-tema {
     top: 0.5rem;
     right: 0.5rem;
   }
 }