:root {
  color-scheme: dark;
}

body {
  font-family: 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Soporte de áreas seguras para celulares con notch / Dynamic Island y tablets (iOS & Android) */
@supports (padding-top: env(safe-area-inset-top)) {
  header {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  #main-sidebar {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  #mobile-bottom-nav {
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
}

/* Optimización táctil para evitar retardo de 300ms en clics en móviles */
button, a, input, select, textarea {
  touch-action: manipulation;
}

/* Desplazamiento fluido nativo en iOS y Android con momentum */
main, .overflow-y-auto, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Prevenir zoom forzado automático en iOS Safari al enfocar inputs */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Ajuste de tap targets para interacción táctil cómoda (Human Interface Guidelines) */
  .mobile-touch-target {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Estilos para datepickers e iconos nativos */
input[type="date"],
input[type="month"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  /* Dorado Brillante Eléctrico de Alta Visibilidad (#FBBF24) acorde a la marca */
  filter: invert(76%) sepia(53%) saturate(1450%) hue-rotate(357deg) brightness(104%) contrast(105%) drop-shadow(0 0 2px rgba(251, 191, 36, 0.5));
  cursor: pointer;
  opacity: 1;
  transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
  padding: 3px 5px;
  border-radius: 6px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.18);
  background-color: rgba(245, 158, 11, 0.2);
  filter: invert(88%) sepia(60%) saturate(1800%) hue-rotate(357deg) brightness(118%) contrast(105%) drop-shadow(0 0 5px rgba(251, 191, 36, 0.8));
}

/* Barra de desplazamiento estética en dark mode */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 1);
}