/*
====================================================
 ESAPH - CENTRO DE ATENCION Y SOPORTE
 Diseño adaptable para osTicket 1.18.4
 Version 3.0
====================================================
*/

/* ESTILOS GENERALES */

html {
  box-sizing: border-box;
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #25334a;
}

#container {
  background: #ffffff;
}

#content {
  height: auto !important;
  min-height: 350px;
}

#content h1 {
  color: #303c91;
  font-weight: 600;
}

#content p {
  line-height: 1.6;
}

/* FORMULARIOS */

#content input,
#content select,
#content textarea {
  max-width: 100%;
}

#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content select,
#content textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  background-color: #ffffff;
  color: #25334a;
}

#content input:focus,
#content select:focus,
#content textarea:focus {
  border-color: #299bd5;
  outline: 2px solid rgba(41,155,213,.15);
}

/* BOTONES */

#content input[type="submit"],
#content input[type="reset"],
#content button {
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
}

/* PIE DE PAGINA */

#footer {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}

/*
====================================================
 ADAPTACION PARA CELULARES Y TABLETAS
====================================================
*/

@media screen and (max-width: 768px) {

  /* PAGINA */

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  #container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-shadow: none !important;
  }

  /* CABECERA Y LOGOTIPO */

  #header {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #header #logo {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;
  }

  #header #logo img {
    display: block !important;
    width: auto !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  #header .pull-right {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* MENU VERTICAL SIN ICONOS SUPERPUESTOS */

  #nav {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 10px !important;
    background: #f3f6fb !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  #nav li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: none !important;
  }

  #nav li a {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    text-align: left !important;
    text-indent: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    color: #27334d !important;
    font-size: 15px !important;
    text-decoration: none !important;
  }

  #nav li a::before,
  #nav li a::after {
    display: none !important;
    content: none !important;
  }

  #nav li a:hover,
  #nav li a.active {
    background: #e0efff !important;
    color: #253b91 !important;
  }

  /* CONTENIDO */

  #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    overflow-wrap: break-word !important;
  }

  #content h1 {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin: 0 0 14px !important;
  }

  #content h2 {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }

  #content p,
  #content .form-desc,
  #content .form-header {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* FORMULARIO DE TICKETS */

  #ticketForm {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #ticketForm > table,
  #ticketForm > table[width="800"],
  #content table.form_table,
  #content table[width="800"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  #ticketForm > table > tbody,
  #ticketForm > table > tbody > tr,
  #ticketForm > table > tbody > tr > td,
  #ticketForm > table > tbody > tr > th,
  #content table.form_table tbody,
  #content table.form_table tr,
  #content table.form_table td,
  #content table.form_table th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  #ticketForm > table > tbody > tr > td,
  #content table.form_table td {
    padding: 7px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #ticketForm input[type="text"],
  #ticketForm input[type="email"],
  #ticketForm input[type="tel"],
  #ticketForm select,
  #ticketForm textarea,
  #content table.form_table input[type="text"],
  #content table.form_table select,
  #content table.form_table textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  #ticketForm input[type="checkbox"],
  #ticketForm input[type="radio"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 5px 6px 5px 0 !important;
  }

  #ticketForm label {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #ticketForm .form-header {
    font-size: 18px !important;
    font-weight: bold !important;
  }

  #ticketForm .form-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* BOTONES DEL FORMULARIO */

  #ticketForm input[type="submit"],
  #ticketForm input[type="reset"],
  #ticketForm input[type="button"],
  #ticketForm button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 7px 0 !important;
    padding: 11px 14px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: normal !important;
    cursor: pointer;
  }

  #ticketForm input[type="submit"] {
    background: #303c91 !important;
    color: #ffffff !important;
    border: 1px solid #303c91 !important;
  }

  #ticketForm input[type="reset"],
  #ticketForm input[type="button"] {
    background: #f1f5f9 !important;
    color: #27334d !important;
    border: 1px solid #cbd5e1 !important;
  }

  /* PAGINA DE INICIO */

  #content .main-content,
  #content .sidebar,
  #content .pull-left,
  #content .pull-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #content .sidebar {
    margin-top: 18px !important;
  }

  /* CONSULTA DE TICKETS */

  #content form {
    max-width: 100% !important;
  }

  #content fieldset {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #content fieldset input[type="text"],
  #content fieldset input[type="email"],
  #content fieldset input[type="password"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* PIE DE PAGINA */

  #footer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 12px !important;
    margin: 0 !important;
    background: #f3f6fb !important;
    border-top: 1px solid #e0e7f0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  #footer a {
    overflow-wrap: anywhere !important;
  }

  #footer img {
    max-width: 100% !important;
    height: auto !important;
  }

}

/* PANTALLAS MUY PEQUEÑAS */

@media screen and (max-width: 360px) {

  #container {
    padding: 0 10px !important;
  }

  #header #logo img {
    max-width: 190px !important;
  }

  #content h1 {
    font-size: 21px !important;
  }

  #nav li a {
    font-size: 14px !important;
}
}

  /* ESAPH - Correccion de consulta de tickets en movil */

@media screen and (max-width: 768px) {

  #clientLogin > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 15px !important;
  }

  #clientLogin .login-box,
  #clientLogin .instructions {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #clientLogin .instructions {
    padding: 18px !important;
    background: #eef4fc !important;
    border-radius: 8px !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
  }

  #clientLogin .instructions::before,
  #clientLogin .instructions::after {
    display: none !important;
    content: none !important;
  }


}