: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;
}

/* Permitir desplazamiento táctil fluido de 1 solo dedo en Android y iOS */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: pan-x pan-y;
}

main {
  touch-action: pan-x pan-y;
}

/* Desplazamiento táctil en tablas con scroll horizontal sin atrapar el scroll vertical */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

/* Modales y contenedores flotantes con scroll interno estricto */
.fixed .overflow-y-auto,
[id^="modal-"] .overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

/* Botones de navegación inferior móvil */
#mobile-bottom-nav button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* 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;
  }
}

/* ==========================================================================
   TEMPO BRAND DESIGN SYSTEM (Valores Oficiales de la Marca)
   - Turquesa Superior (Isotipo): #2DE2B6 / rgb(45, 226, 182)
   - Azul Eléctrico Medio:        #2D68FF / rgb(45, 104, 255)
   - Púrpura / Violeta Base:      #7B2CBF / rgb(123, 44, 191)
   - Fondo Oscuro / Grafito:      #1A1A1A / rgb(26, 26, 26)
   - Corporativo / Tarjetas:      #1D1E20
   - Blanco Puro:                 #FFFFFF
   ========================================================================== */

:root {
  color-scheme: dark;
  --temppo-turquoise: #2DE2B6;
  --temppo-blue: #2D68FF;
  --temppo-purple: #7B2CBF;
  --temppo-dark: #1A1A1A;
  --temppo-card: #1D1E20;
}

::selection {
  background-color: #2D68FF;
  color: #FFFFFF;
}

/* Contornos y marcos de selección activa (días, franjas, colaboradores) */
.border-selected,
.selected-card,
[aria-selected="true"] {
  border-color: #2DE2B6 !important;
  box-shadow: 0 0 14px rgba(45, 226, 182, 0.35) !important;
}

/* Enfoque en inputs con azul eléctrico */
input:focus,
select:focus,
textarea:focus {
  border-color: #2D68FF !important;
  box-shadow: 0 0 0 2px rgba(45, 104, 255, 0.25) !important;
  outline: none;
}

/* Botones primarios en Azul Eléctrico Temppo con texto en blanco nítido */
button.bg-amber-500,
a.bg-amber-500 {
  color: #FFFFFF !important;
}

button.bg-amber-500:hover,
a.bg-amber-500:hover {
  background-color: #2352db !important;
  box-shadow: 0 10px 22px -4px rgba(45, 104, 255, 0.4) !important;
}

/* 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 {
  /* Filtro de color Azul Eléctrico y Turquesa temppo */
  filter: invert(53%) sepia(87%) saturate(2250%) hue-rotate(190deg) brightness(101%) contrast(106%) drop-shadow(0 0 3px rgba(45, 104, 255, 0.6));
  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(45, 104, 255, 0.2);
  filter: invert(80%) sepia(45%) saturate(1600%) hue-rotate(115deg) brightness(103%) contrast(101%) drop-shadow(0 0 6px rgba(45, 226, 182, 0.8));
}

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

::-webkit-scrollbar-track {
  background: #141517;
}

::-webkit-scrollbar-thumb {
  background: rgba(45, 104, 255, 0.3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 226, 182, 0.6);
}