@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-primary: #ff3131;
  --color-primary-dark: #e02828;
  --color-primary-light: #ff5555;
  --color-secondary: #daa4a4;
  --color-accent: #ff6b6b;

  --color-bg: #F5F5F5;
  --color-bg-secondary: #f1f5f9;
  --color-text: #1e293b;
  --color-text-light: #64748b;
  --color-text-muted: #94a3b8;

  --color-sidebar-bg: #FFFFFF;
  --color-sidebar-hover: #FFE6E6;
  --color-border: #E0E0E0;
  --color-border-focus: #cbd5e1;
  --color-white: #FFFFFF;
  --color-hover: #EBEBEB;

  --color-success-text: #059669;
  --color-success-bg: #d1fae5;
  --color-error-text: #dc2626;
  --color-error-bg: #fee2e2;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-width: 240px;
  --navbar-height: 56px;
  --navbar-height-margin: 70px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --color-primary-rgb: 255, 49, 49;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.12);
  --gradient-separator: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
    --color-text-light: #b0b0b0;
    --color-border: #333333;
    --color-gray-light: #2a2a2a;
  }

  .login-page {
    background: #0a0a0a;
  }

  .login-container {
    background: #1a1a1a;
    border-color: #333333;
  }

  .form-input {
    background: #2a2a2a;
    border-color: #333333;
    color: #ffffff;
  }
}

body{
    font-family: var(--font-family);
    background-color: #ffffff;
    overflow-x: hidden;
    
    display: flex;
}
.layout {
  position: relative;
  width: 100%;
}
input:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}
select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 0.5px rgba(255, 49, 49, 1) /* cor primária suavizada */
}

/* Remove o highlight azul em elementos clicáveis no mobile */
* {
  -webkit-tap-highlight-color: transparent;
  /*-webkit-user-select: none;  Impede seleção de texto em mobile Safari */
  user-select: none;
  touch-action: manipulation; /* Evita delays e bugs ao clicar */
}

::selection {
  background-color: var(--color-primary); /* Cor de fundo da seleção */
  color: var(--color-white); /* Cor do texto selecionado */
}
::-webkit-scrollbar {
  width: 6px; /* Largura da barra de rolagem */
  height: 6px; /* Altura da barra de rolagem */
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Cor de fundo da trilha da barra de rolagem */
}
::-webkit-scrollbar-thumb {
  background-color: #888; /* Cor do controle deslizante da barra de rolagem */
  border-radius: 6px; /* Borda arredondada do controle deslizante */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Cor do controle deslizante ao passar o mouse */
}

/*===== UTILS =====*/
.hidden {
    display: none !important;
}
.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.select-readonly {
  pointer-events: none;
  background-color: #f5f5f5;
  color: #555;
  opacity: 0.7;
}
.input-valid {
  border: 1px solid var(--color-success-text);
  background-color: var(--color-success-bg);
  color: var(--color-text);
}
.input-invalid {
  border: 1px solid var(--color-error-text);
  background-color: var(--color-error-bg);
  color: var(--color-text);
}