/*
 * Capa responsive compatible con Bootstrap.
 * No cambia IDs, clases funcionales ni logica JS: solo corrige maquetacion.
 */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

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

img, object, embed, iframe {
  max-width: 100%;
}

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}

[class*="col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 8px;
  padding-left: 8px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }

.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.mw-100 { max-width: 100% !important; }
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#main_container,
.main_content,
.center_content,
.right_content,
.app-menu-content,
#container-model,
.ex_highlight,
.ui-tabs,
.ui-tabs-panel {
  max-width: 100%;
}

.right_content {
  min-width: 0;
}

#container-model {
  width: 100%;
  overflow: visible;
}

.button-divs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.button-divs > div,
.button-divs > button,
.button-divs .ui-button {
  flex: 0 0 auto;
  max-width: 100%;
}

.title-new {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ex_highlight,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.ui-jqgrid,
.ui-jqgrid-view {
  width: 100% !important;
  max-width: 100% !important;
}

.dataTables_wrapper,
.ex_highlight {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper table,
.ex_highlight table,
table.display,
table.dataTable {
  max-width: none;
}

table.display,
table.dataTable {
  white-space: nowrap;
}

.table-details,
.detalle_header,
.detalle_body,
.detalle_body_anul,
.table_detail,
.tabla-tramites {
  max-width: 100% !important;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  float: none !important;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 4px 8px 6px 0;
}

.dataTables_filter {
  justify-content: flex-end;
}

.dataTables_filter input,
.dataTables_length select {
  max-width: 100%;
}

form,
#form-data,
#form-extends,
#form-enviar,
.app-form,
.ui-form {
  max-width: 100%;
}

form fieldset,
#form-data fieldset,
#form-extends fieldset,
#form-enviar fieldset,
.app-form fieldset,
.ui-form fieldset {
  max-width: 100%;
}

form fieldset[style*="float"],
#form-data fieldset[style*="float"],
#form-extends fieldset[style*="float"],
#form-enviar fieldset[style*="float"],
.app-form fieldset[style*="float"],
.ui-form fieldset[style*="float"] {
  max-width: 100%;
}

form table,
#form-data table,
#form-extends table,
#form-enviar table,
.app-form table,
.ui-form table {
  max-width: 100%;
}

input,
select,
textarea,
button,
.ui-button {
  max-width: 100%;
}

input[type="text"],
input[type="password"],
input[type="file"],
input:not([type]),
select,
textarea {
  min-width: 0;
}

textarea {
  resize: vertical;
}

input[id*="dni" i],
input[name*="dni" i],
input[id*="ruc" i],
input[name*="ruc" i],
input[id*="serie" i],
input[name*="serie" i],
input[id*="numero" i],
input[name*="numero" i],
input[id*="num" i],
input[name*="num" i],
input[id*="folio" i],
input[name*="folio" i],
input[id*="codigo" i],
input[name*="codigo" i],
input[id*="cod" i],
input[name*="cod" i] {
  width: auto;
  max-width: 180px;
}

input[id*="fecha" i],
input[name*="fecha" i],
input[id*="hora" i],
input[name*="hora" i] {
  width: auto;
  max-width: 210px;
}

input[id*="nombre" i],
input[name*="nombre" i],
input[id*="asunto" i],
input[name*="asunto" i],
input[id*="direccion" i],
input[name*="direccion" i],
input[id*="descripcion" i],
input[name*="descripcion" i],
textarea {
  width: 100%;
}

.ui-dialog {
  max-width: calc(100vw - 24px) !important;
}

.ui-dialog .ui-dialog-content {
  max-width: 100%;
  overflow-x: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  max-width: 100%;
}

.ui-dialog .ui-dialog-buttonset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0 !important;
}

.ui-tabs .ui-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  overflow: visible;
}

.ui-tabs .ui-tabs-nav li {
  float: none !important;
  max-width: 100%;
}

.ui-tabs .ui-tabs-nav li a {
  max-width: 240px;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 576px) {
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 768px) {
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (max-width: 900px) {
  .header {
    min-width: 0 !important;
  }

  .button-divs {
    margin-top: 8px !important;
  }

  .ui-dialog {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
  }

  .ui-dialog .ui-dialog-content {
    max-height: calc(100vh - 130px) !important;
  }

  .dataTables_filter {
    justify-content: flex-start;
  }

  .dataTables_filter input {
    width: min(220px, 100%) !important;
  }
}

@media (max-width: 700px) {
  form fieldset[style*="float"],
  #form-data fieldset[style*="float"],
  #form-extends fieldset[style*="float"],
  #form-enviar fieldset[style*="float"],
  .app-form fieldset[style*="float"],
  .ui-form fieldset[style*="float"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .box-form,
  .box-form2 {
    width: 100% !important;
    min-width: 0 !important;
  }

  form table:not(.display):not(.dataTable),
  #form-data table:not(.display):not(.dataTable),
  #form-extends table:not(.display):not(.dataTable),
  #form-enviar table:not(.display):not(.dataTable),
  .app-form table:not(.display):not(.dataTable),
  .ui-form table:not(.display):not(.dataTable),
  form table:not(.display):not(.dataTable) tbody,
  form table:not(.display):not(.dataTable) tr,
  form table:not(.display):not(.dataTable) td,
  #form-data table:not(.display):not(.dataTable) tbody,
  #form-data table:not(.display):not(.dataTable) tr,
  #form-data table:not(.display):not(.dataTable) td,
  #form-extends table:not(.display):not(.dataTable) tbody,
  #form-extends table:not(.display):not(.dataTable) tr,
  #form-extends table:not(.display):not(.dataTable) td,
  #form-enviar table:not(.display):not(.dataTable) tbody,
  #form-enviar table:not(.display):not(.dataTable) tr,
  #form-enviar table:not(.display):not(.dataTable) td {
    display: block;
    width: 100% !important;
  }

  form table:not(.display):not(.dataTable) td,
  #form-data table:not(.display):not(.dataTable) td,
  #form-extends table:not(.display):not(.dataTable) td,
  #form-enviar table:not(.display):not(.dataTable) td {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  input[type="text"],
  input[type="password"],
  input:not([type]),
  select,
  textarea {
    max-width: 100%;
  }

  input[id*="dni" i],
  input[name*="dni" i],
  input[id*="ruc" i],
  input[name*="ruc" i],
  input[id*="serie" i],
  input[name*="serie" i],
  input[id*="numero" i],
  input[name*="numero" i],
  input[id*="num" i],
  input[name*="num" i],
  input[id*="folio" i],
  input[name*="folio" i],
  input[id*="codigo" i],
  input[name*="codigo" i],
  input[id*="cod" i],
  input[name*="cod" i],
  input[id*="fecha" i],
  input[name*="fecha" i],
  input[id*="hora" i],
  input[name*="hora" i] {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .button-divs,
  .ui-dialog .ui-dialog-buttonset {
    justify-content: stretch;
  }

  .button-divs > button,
  .button-divs .ui-button,
  .ui-dialog .ui-dialog-buttonpane button {
    flex: 1 1 auto;
  }

  .ui-tabs .ui-tabs-nav li a {
    max-width: 160px;
  }
}