/*
  Responsividad SIRIX UI
  - Escala layout principal y subventanas
  - Mantiene proporciones visuales limpias en móvil/tablet/desktop
*/

html, body{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

*, *::before, *::after{ box-sizing: border-box; }

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* Evitar zoom inesperado de iOS en formularios */
input, select, textarea{ font-size: 16px; }

/* Shell principal */
#appShell > .flex{
  min-height: 100dvh;
  height: auto;
}

.sirix-main{
  min-width: 0;
  min-height: 100dvh;
  height: auto;
}

#appContent{
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Scrolling horizontal suave para tablas grandes */
#appContent .overflow-x-auto{
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Filtros de estado en Panel Principal */
.status-tabs-wrap{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.status-tabs{
  width: max-content;
  min-width: 100%;
  flex-wrap: nowrap;
}

/* Sidebar responsive: menú deslizable */
@media (max-width: 1023px){
  .sirix-sidebar{
    z-index: 50;
    width: 18rem;
    max-width: 86vw;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 20px 0 60px rgba(0,0,0,.25);
  }

  body.sidebar-open .sirix-sidebar{ transform: translateX(0); }
  .sirix-main{ margin-left: 0 !important; }
  .sirix-main > div{ padding-left: 1rem; padding-right: 1rem; }
}

body.sidebar-open #sidebarBackdrop{ display: block; }

/* Ajustes de header y contenido en pantallas medianas */
@media (max-width: 1100px){
  #main .app-header h2{
    font-size: 1.25rem;
    line-height: 1.2;
  }

  #appContent{ padding: 1.25rem; }
}

@media (min-width: 1101px){
  .fichas-toolbar{
    display: grid;
    grid-template-columns: auto minmax(320px, 420px);
    gap: .9rem 1rem;
    align-items: center;
  }

  .fichas-toolbar > h3{ grid-column: 1 / 2; }
  .fichas-toolbar > .relative{ grid-column: 2 / 3; justify-self: end; width: 100%; max-width: 420px; }
  .fichas-toolbar > .status-tabs-wrap{ grid-column: 1 / -1; }
}

/* Móvil */
@media (max-width: 640px){
  #main .app-header{
    height: auto;
    min-height: 4.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  #main .app-header h2{
    font-size: 1rem;
    line-height: 1.2;
  }

  #main .app-header .text-right{ display: none; }
  #appContent{ padding: .9rem; }

  .service-button{
    height: 7.5rem;
    padding: 1rem;
  }

  .service-button svg{
    width: 2rem;
    height: 2rem;
  }

  table th, table td{
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    white-space: nowrap;
  }

  .bg-brand-content.p-1.rounded-lg{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .bg-brand-content.p-1.rounded-lg > button{ white-space: nowrap; }
}

/* Modales y subventanas: regla general */
[id$="Modal"]{
  padding: 0.75rem;
  overflow-y: auto;
}

[id$="Modal"] > div{
  width: min(100%, 1180px);
  max-height: calc(100dvh - 1.5rem) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  min-height: 0;
}

/* Mantener contenido desplazable sin romper layout interno */
[id$="Modal"] > div > :not(header){
  min-height: 0;
}

[id$="Modal"] .sirix-modal-scroll,
[id$="Modal"] .overflow-auto,
[id$="Modal"] .overflow-y-auto{
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Fallback de scroll para bloques de contenido de modales que no declaran overflow */
[id$="Modal"] .p-6.bg-white,
[id$="Modal"] .p-6.bg-brand-content,
[id$="Modal"] .p-5.bg-brand-content{
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px){
  [id$="Modal"]{ padding: .5rem; }

  [id$="Modal"] > div{
    width: 100% !important;
    max-width: 98vw !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 1rem;
  }

  #pizarraModal > div{ height: auto !important; }

  .modal-header h2{
    font-size: 1.05rem;
    line-height: 1.35;
  }
}

/* Pizarra: columnas deslizables en tablets/móvil */
@media (max-width: 1023px){
  #pizarraModal .grid{
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
  }

  #pizarraModal .grid > div{ scroll-snap-align: start; }
}

@media (max-width: 640px){
  .modal-shadow input,
  .modal-shadow select,
  .modal-shadow textarea{
    max-width: 100%;
    min-width: 0;
  }
}