/* Optimizaciones Touch para iOS y Windows - SIG CAZEL */

/* ===== OPTIMIZACIONES UNIVERSALES TOUCH ===== */

/* Importante: Evitar transformar html/body porque rompe `position: fixed` en iOS.
   La aceleración por hardware (translateZ) se aplicará a clases específicas si es necesario. */
html,
body {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Optimización para elementos interactivos */
button, 
.btn, 
a, 
[role="button"],
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(115, 1, 17, 0.3);
  tap-highlight-color: rgba(115, 1, 17, 0.3);
  cursor: pointer;
  min-height: 44px; /* Mínimo recomendado para iOS */
  min-width: 44px;
  position: relative;
}

/* Feedback visual para touch */
button:active,
.btn:active,
a:active,
[role="button"]:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Optimización de inputs para touch */
input,
textarea,
select {
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  font-size: 16px; /* Evita zoom en iOS */
  border-radius: 8px;
  padding: 12px 16px;
  /* Prevenir transformaciones que interfieren con el teclado */
  -webkit-transform: none !important;
  transform: none !important;
}

/* ===== MANEJO DEL TECLADO VIRTUAL ===== */

/* Variables CSS para manejo dinámico del teclado */
:root {
  --keyboard-height: 0px;
  --available-height: 100vh;
}

/* Cuando el teclado virtual está abierto */
.keyboard-open {
  /* Ajustar altura disponible */
  --vh: calc(var(--available-height) * 0.01);
}

/* Contenedores principales que deben ajustarse al teclado */
.keyboard-open .main-container,
.keyboard-open .page-wrapper,
.keyboard-open .container-fluid {
  height: var(--available-height) !important;
  max-height: var(--available-height) !important;
}

/* Modales y overlays deben ajustarse al teclado */
.keyboard-open .modal-dialog {
  max-height: calc(var(--available-height) - 2rem) !important;
}

.keyboard-open .modal-body {
  max-height: calc(var(--available-height) - 8rem) !important;
  overflow-y: auto;
}

/* Inputs cuando tienen foco con teclado abierto */
.keyboard-open .input-focused input,
.keyboard-open .input-focused textarea {
  /* Asegurar que estén visibles */
  position: relative;
  z-index: 1000;
}

/* Scroll suave para contenedores cuando el teclado está abierto */
.keyboard-open .scroll-container,
.keyboard-open .modal-body,
.keyboard-open .offcanvas-body {
  scroll-behavior: smooth;
}

/* PWA específico: ajustes para standalone mode */
@media all and (display-mode: standalone) {
  .keyboard-open {
    /* En PWA, el teclado no reduce el viewport automáticamente */
    height: var(--available-height) !important;
    overflow: hidden;
  }
  
  .keyboard-open body {
    height: var(--available-height) !important;
    overflow-y: auto;
  }
}

/* ===== OPTIMIZACIONES ESPECÍFICAS iOS ===== */

/* Safe areas para iPhone con notch */
@supports (padding: env(safe-area-inset-top)) {
  .ios-safe-top {
    padding-top: calc(env(safe-area-inset-top) + 16px);
  }
  
  .ios-safe-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }
  
  .ios-safe-left {
    padding-left: calc(env(safe-area-inset-left) + 16px);
  }
  
  .ios-safe-right {
    padding-right: calc(env(safe-area-inset-right) + 16px);
  }
}

/* ===== BOTTOM APP BAR SEGURO PARA iOS PWA ===== */

/* Contenedor fijo con soporte de notch/home bar */
.bottom-app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(98, 105, 118, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.06);
}

/* Evitar que ancestros con transform afecten el fixed en iOS */
.bottom-app-bar {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Altura adaptable y botones fluidos */
.bottom-app-bar .btn {
  flex: 1 1 0;
  min-height: 46px;
}

/* Reservar espacio para que el contenido no quede oculto */
.has-bottom-app-bar {
  padding-bottom: 88px; /* fallback */
}

/* Ajuste con safe-area en dispositivos con notch */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-app-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .has-bottom-app-bar {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* Optimización para Safari iOS */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Mejora la calidad de texto en pantallas Retina */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* Prevenir zoom en inputs en iOS */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    transform: translateZ(0);
  }
}

/* Optimización de scroll para contenedores */
.scroll-container {
  overflow-y: auto;
  /* Scroll suave nativo moderno */
  scroll-behavior: smooth;
}

/* Desactivar selección de texto no deseada */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ===== OPTIMIZACIONES ESPECÍFICAS WINDOWS TOUCH ===== */

/* Optimización para Microsoft Edge y IE */
@media screen and (-ms-high-contrast: active), 
       screen and (-ms-high-contrast: none) {
  
  /* Mejora el rendimiento en Windows */
  * {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
  
  /* Optimización de scroll suave */
  html {
    -ms-scroll-rails: railed;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

/* Surface y dispositivos Windows con touch */
@media screen and (pointer: coarse) {
  /* Aumentar área de touch para Windows */
  button,
  .btn,
  a[role="button"] {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 20px;
  }
  
  /* Mejorar contraste para pantallas touch */
  .btn-primary {
    border: 2px solid transparent;
  }
  
  .btn-primary:focus {
    outline: 3px solid rgba(115, 1, 17, 0.5);
    outline-offset: 2px;
  }
}

/* ===== OPTIMIZACIONES PARA MONITORES GRANDES TOUCH ===== */

@media screen and (min-width: 1024px) and (pointer: coarse) {
  /* Interfaz para Surface Studio, All-in-One touch, etc. */
  
  /* Aumentar tamaños para touch en pantallas grandes */
  .btn {
    min-height: 52px;
    min-width: 52px;
    font-size: 18px;
    padding: 16px 24px;
  }
  
  /* Cards más grandes para touch */
  .card {
    margin-bottom: 24px;
  }
  
  /* Mejor espaciado para dedos */
  .nav-link {
    padding: 16px 20px;
    margin: 4px;
  }
  
  /* Formularios optimizados para touch en desktop */
  .form-control {
    min-height: 52px;
    font-size: 18px;
    padding: 16px 20px;
  }
  
  /* Tablas touch-friendly */
  .table td,
  .table th {
    padding: 16px 20px;
    min-height: 52px;
  }
}

/* ===== ANIMACIONES OPTIMIZADAS PARA TOUCH ===== */

/* Transiciones suaves para feedback touch */
.touch-feedback {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.touch-feedback:active {
  transform: scale(0.98);
  background-color: rgba(115, 1, 17, 0.1);
}

/* Ripple effect para Material Design touch */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(115, 1, 17, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ===== ORIENTACIÓN Y RESPONSIVE TOUCH ===== */

/* Landscape en dispositivos touch */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .touch-landscape {
    flex-direction: row;
    align-items: center;
  }
  
  /* Reducir padding vertical en landscape */
  .container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ===== ACCESIBILIDAD TOUCH ===== */

/* Focus mejorado para navegación por touch */
button:focus,
.btn:focus,
a:focus {
  outline: 3px solid rgba(115, 1, 17, 0.6);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(115, 1, 17, 0.2);
}

/* Estados hover simulados para touch */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    background-color: rgba(115, 1, 17, 0.1);
  }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* Aceleración por hardware */
.gpu-accelerated {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Optimización para animaciones */
.smooth-animation {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* ===== BOTÓN INSTALAR PWA ===== */

#install-pwa-btn {
  border-radius: 20px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #730111, #5a0d0e);
  border: 1px solid #730111;
  color: white;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(115, 1, 17, 0.2);
}

#install-pwa-btn:hover {
  background: linear-gradient(135deg, #5a0d0e, #730111);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(115, 1, 17, 0.3);
}

#install-pwa-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(115, 1, 17, 0.4);
}

#install-pwa-btn .icon {
  transition: transform 0.3s ease;
}

#install-pwa-btn:hover .icon {
  transform: translateY(-2px);
}

/* Animación de aparición del botón */
#install-pwa-btn.show {
  animation: pwa-btn-appear 0.5s ease-out;
}

@keyframes pwa-btn-appear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Estado de app instalada */
#app-installed-info {
  animation: pwa-installed-appear 0.5s ease-out;
}

@keyframes pwa-installed-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive para el footer PWA */
@media (max-width: 768px) {
  #install-pwa-btn {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }
  
  .footer .row {
    text-align: center !important;
  }
}

/* Optimización touch para el botón instalar */
@media (pointer: coarse) {
  #install-pwa-btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 14px;
  }
  
  #install-pwa-btn .icon {
    width: 18px;
    height: 18px;
  }
}

/* ===== MENÚ MY SIG ===== */

#my-sig-menu .nav-link {
  color: #730111;
  font-weight: 500;
}

#my-sig-menu .nav-link:hover {
  color: #5a0d0e;
  background-color: rgba(115, 1, 17, 0.1);
}

#my-sig-menu .dropdown-menu {
  border: 1px solid rgba(115, 1, 17, 0.2);
  box-shadow: 0 4px 16px rgba(115, 1, 17, 0.15);
}

#install-sig-menu-item {
  color: #730111;
  font-weight: 500;
  transition: all 0.3s ease;
}

#install-sig-menu-item:hover {
  background-color: rgba(115, 1, 17, 0.1);
  color: #5a0d0e;
  transform: translateX(4px);
}

#install-sig-menu-item .icon {
  animation: install-bounce 2s infinite;
}

@keyframes install-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
}

#app-status-menu-item {
  display: none;
  color: #198754;
}

#app-status-menu-item.show {
  display: block;
  animation: status-appear 0.5s ease-out;
}

@keyframes status-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Badge de notificación para instalación */
#my-sig-menu .nav-link::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #730111;
  border-radius: 50%;
  opacity: 0;
  animation: badge-pulse 2s infinite;
}

#my-sig-menu.show-install-badge .nav-link::after {
  opacity: 1;
}

@keyframes badge-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== ESTILOS PARA ICONOS DEL MENÚ ===== */

/* Iconos principales del menú */
.navbar-nav .nav-link .nav-link-icon {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
  transition: all 0.2s ease;
}

/* Hover en iconos principales */
.navbar-nav .nav-link:hover .nav-link-icon {
  opacity: 1;
  transform: translateY(-1px);
}

/* Iconos de dropdown */
.dropdown-menu .dropdown-item .nav-link-icon {
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  transition: all 0.2s ease;
  opacity: 0.7;
}

/* Hover en iconos de dropdown */
.dropdown-menu .dropdown-item:hover .nav-link-icon {
  opacity: 1;
  transform: translateX(2px);
}

/* Estilos específicos para My SIG menu */
#my-sig-menu .dropdown-item {
  padding: 8px 16px;
  border-radius: 6px;
  margin: 2px 8px;
  transition: all 0.2s ease;
}

#my-sig-menu .dropdown-item:hover {
  background-color: rgba(115, 1, 17, 0.1);
  transform: translateX(4px);
}

/* Icono de instalación con animación especial */
#install-sig-menu-item .nav-link-icon {
  animation: pulse-install 2s infinite;
}

@keyframes pulse-install {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Espaciado consistente para texto en dropdown */
.dropdown-item span:not(.nav-link-icon) {
  font-weight: 500;
}

/* Responsivo para iconos en pantallas pequeñas */
@media (max-width: 768px) {
  .navbar-nav .nav-link .nav-link-icon {
    margin-right: 6px;
  }
  
  .dropdown-menu .dropdown-item .nav-link-icon {
    margin-right: 10px;
    width: 18px;
  }
  
  /* ===== OPTIMIZACIONES DE ALTURA PARA DASHBOARD MÓVIL ===== */
  
  /* Optimizar altura del contenido principal */
  .page-body {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Reducir espacio del contenedor cuando está vacío */
  #contenido-dinamico:empty,
  #contenido-dinamico:has(.loader) {
    min-height: 150px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Optimizar loader en móviles */
  .loader {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  /* Ajustar contenedor principal */
  .container-xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Optimizaciones para móviles muy pequeños */
@media (max-width: 480px) {
  
  /* Altura aún más compacta */
  #contenido-dinamico:empty,
  #contenido-dinamico:has(.loader) {
    min-height: 120px !important;
  }
  
  /* Loader más pequeño */
  .loader {
    width: 2rem;
    height: 2rem;
  }
  
  /* Padding más compacto */
  .page-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  .container-xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ===== OPTIMIZACIÓN ESPECÍFICA PARA FOOTER EN MÓVILES ===== */

@media (max-width: 768px) {
  /* Eliminar espacio excesivo del footer */
  #footer-placeholder {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Footer más compacto */
  .footer {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.75rem;
  }
  
  /* Eliminar padding extra del contenedor del footer */
  .footer .container-xl {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  /* Optimizar texto del footer */
  .footer .col-12 {
    line-height: 1.2;
    padding: 0.125rem 0;
  }
  
  /* Hacer que la página use flexbox para eliminar espacios */
  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .page-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .page-body {
    flex: 1;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  /* Footer ultra compacto en móviles pequeños */
  .footer {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    font-size: 0.7rem;
  }
  
  .footer .container-xl {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
  }
  
  .footer .col-12 {
    padding: 0;
    line-height: 1.1;
  }
}