/* REMOVER PAINEL DE ACESSIBILIDADE - DESABILITADO */
.accessibility-controls,
#accessibilityControls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* ========================================
   COPER VIDA SOS RECICLAGEM - Acessibilidade
   Recursos especiais para idosos e pessoas com dificuldades visuais
   Versão: 1.0
   Data: 10/06/2026
   ======================================== */

/* ========================================
   1. CONTROLE DE TAMANHO DE FONTE
   ======================================== */
body.font-small {
  font-size: 16px;
}

body.font-normal {
  font-size: 18px;
}

body.font-medium {
  font-size: 20px;
}

body.font-large {
  font-size: 22px;
}

body.font-xlarge {
  font-size: 26px;
}

/* Ajuste proporcional dos títulos */
body.font-small h1 { font-size: 40px; }
body.font-small h2 { font-size: 32px; }
body.font-small h3 { font-size: 24px; }

body.font-medium h1 { font-size: 52px; }
body.font-medium h2 { font-size: 40px; }
body.font-medium h3 { font-size: 32px; }

body.font-large h1 { font-size: 60px; }
body.font-large h2 { font-size: 44px; }
body.font-large h3 { font-size: 36px; }

body.font-xlarge h1 { font-size: 72px; }
body.font-xlarge h2 { font-size: 52px; }
body.font-xlarge h3 { font-size: 40px; }

/* ========================================
   2. CONTROLES DE ACESSIBILIDADE
   ======================================== */
.accessibility-controls {
  position: fixed;
  top: 100px;
  right: 20px;
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accessibility-controls.minimized {
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessibility-controls.minimized .controls-content {
  display: none;
}

.accessibility-toggle {
  background-color: #2E7D32;
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.accessibility-toggle:hover {
  background-color: #1B5E20;
  transform: scale(1.1);
}

.controls-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-label {
  font-size: 14px;
  font-weight: 600;
  color: #212121;
  margin-bottom: 4px;
}

.control-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.control-btn {
  background-color: #F5F5F5;
  border: 2px solid #E0E0E0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 44px;
  min-height: 44px;
}

.control-btn:hover {
  background-color: #E8F5E9;
  border-color: #2E7D32;
}

.control-btn.active {
  background-color: #2E7D32;
  color: #FFFFFF;
  border-color: #2E7D32;
}

.contrast-btn {
  width: 100%;
  background-color: #1976D2;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.contrast-btn:hover {
  background-color: #1565C0;
}

/* ========================================
   3. MODO DE ALTO CONTRASTE
   ======================================== */
body.high-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

body.high-contrast * {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

body.high-contrast a {
  color: #00FFFF !important;
  text-decoration: underline !important;
}

body.high-contrast a:hover {
  color: #FFFF00 !important;
}

body.high-contrast .btn-primary,
body.high-contrast .btn {
  background-color: #FFFF00 !important;
  color: #000000 !important;
  border: 3px solid #FFFFFF !important;
}

body.high-contrast .btn:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

body.high-contrast .header,
body.high-contrast .footer {
  background-color: #000000 !important;
  border-bottom: 3px solid #FFFFFF !important;
}

body.high-contrast .card {
  border: 3px solid #FFFFFF !important;
  box-shadow: none !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 3px solid #FFFFFF !important;
}

body.high-contrast .form-control:focus {
  border-color: #FFFF00 !important;
  box-shadow: 0 0 0 3px #FFFF00 !important;
}

body.high-contrast .table {
  border: 3px solid #FFFFFF !important;
}

body.high-contrast .table th,
body.high-contrast .table td {
  border: 2px solid #FFFFFF !important;
}

body.high-contrast img {
  filter: contrast(1.2) brightness(1.1);
  border: 2px solid #FFFFFF !important;
}

/* ========================================
   4. FOCO VISÍVEL APRIMORADO
   ======================================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #2E7D32;
  outline-offset: 2px;
}

body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus,
body.high-contrast textarea:focus,
body.high-contrast select:focus {
  outline: 4px solid #FFFF00 !important;
  outline-offset: 3px;
}

/* ========================================
   5. SKIP LINKS (Pular para conteúdo)
   ======================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: #2E7D32;
  color: #FFFFFF;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid #FFFF00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========================================
   6. INDICADORES VISUAIS
   ======================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   7. BOTÕES E LINKS MAIORES
   ======================================== */
body.font-large .btn,
body.font-xlarge .btn {
  padding: 16px 40px;
  font-size: 20px;
  min-width: 50px;
  min-height: 50px;
}

body.font-large .nav-link,
body.font-xlarge .nav-link {
  padding: 12px 20px;
  font-size: 20px;
}

body.font-large .form-control,
body.font-xlarge .form-control {
  padding: 16px 20px;
  font-size: 20px;
  min-height: 50px;
}

/* ========================================
   8. ESPAÇAMENTO AUMENTADO
   ======================================== */
body.font-large p,
body.font-xlarge p {
  line-height: 1.8;
  margin-bottom: 24px;
}

body.font-large .card,
body.font-xlarge .card {
  padding: 32px;
}

body.font-large .section,
body.font-xlarge .section {
  padding: 80px 0;
}

/* ========================================
   9. ANIMAÇÕES REDUZIDAS
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   10. MODO ESCURO (Opcional)
   ======================================== */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .header,
body.dark-mode .footer {
  background-color: #2a2a2a;
}

body.dark-mode .card {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .form-control {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border-color: #444;
}

body.dark-mode .btn-primary {
  background-color: #66BB6A;
}

body.dark-mode .btn-primary:hover {
  background-color: #4CAF50;
}

/* ========================================
   11. TOOLTIPS ACESSÍVEIS
   ======================================== */
.tooltip-accessible {
  position: relative;
  display: inline-block;
}

.tooltip-accessible .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #212121;
  color: #FFFFFF;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
  line-height: 1.4;
}

.tooltip-accessible:hover .tooltip-text,
.tooltip-accessible:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ========================================
   12. INDICADOR DE CARREGAMENTO
   ======================================== */
.loading-indicator {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 5px solid #E0E0E0;
  border-top: 5px solid #2E7D32;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 18px;
  font-weight: 600;
  color: #2E7D32;
  margin-top: 16px;
}

/* ========================================
   13. MENSAGENS DE ERRO ACESSÍVEIS
   ======================================== */
.error-message {
  background-color: #FFEBEE;
  border-left: 4px solid #D32F2F;
  color: #B71C1C;
  padding: 16px;
  margin: 16px 0;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
}

.error-message::before {
  content: '⚠️ ';
  font-size: 24px;
  margin-right: 8px;
}

.success-message {
  background-color: #E8F5E9;
  border-left: 4px solid #2E7D32;
  color: #1B5E20;
  padding: 16px;
  margin: 16px 0;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
}

.success-message::before {
  content: '✓ ';
  font-size: 24px;
  margin-right: 8px;
}

/* ========================================
   14. RESPONSIVIDADE DOS CONTROLES
   ======================================== */
@media (max-width: 767px) {
  .accessibility-controls {
    right: 10px;
    top: 80px;
    padding: 12px;
  }
  
  .control-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .control-label {
    font-size: 12px;
  }
}

/* ========================================
   15. IMPRESSÃO ACESSÍVEL
   ======================================== */
@media print {
  .accessibility-controls {
    display: none !important;
  }
  
  body {
    font-size: 12pt !important;
    color: #000 !important;
    background: #fff !important;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }
}

/* Made with Bob */