/*--------------------
GENERAL
--------------------*/

:root {
  --navy-blue: #004B87;
  --medtronic-blue: #001E46;
  --cobalt-blue: #0085CA;
  --sky-blue: #71C5E8;
  --light-orange: #F7A800;
  --light: #FFF;
  --dark: #OOO;
  --green: #77BC1F;
  --gray-light: #C9D3DA;
  --gray-light-plus: #E1E5E5;
  --gray-light-super: #F6F6F6;
  --gray: #A0A8AD;
  --gray-dark: #697278;
  --gray-dark-plus: #464D52;
  --gray-dark-super: #222628;
  --turquoise: #00C4B3;
  --purple: #B0008E;
  --charcoal-gray: #53565a;
  --dark-gray: #888B8D;
  --pale-gray: #E8E8E7;
  --blue-gray: #5B7F95;
  --light-gray: #B1B3B3;
}

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  box-sizing: border-box;
  outline: none !important;
}

body {
  -webkit-touch-callout: none; 
  -webkit-text-size-adjust: none;
  user-select: none;
  background-color:#fff;
  font-family: 'effraregular', 'Calibri', sans-serif;
  font-size:13px;
  margin:0px;
  padding:0px;
  width:100%;
  height:100vh;
}

/*--------------------
SPLASH
--------------------*/

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  display: block;
  background-color: white;
  background-image: url(../img/logo-metrodic-blue.png);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;

  transition-property: all;
  transition-duration: 2s;
}

/*--------------------
APP
--------------------*/

#app {
  background-color: var(--light);
}

/*--------------------
FOOTER
--------------------*/

#footer {
  background-color: var(--medtronic-blue);
  background-image: url(../img/logo-metrodic-white.png);
  background-repeat: no-repeat;
  background-size: auto 36%;
  background-position: right 20px center;
  height: 36px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

/*--------------------
INTRODUCCION
--------------------*/

#introduccion {
  background-color: var(--light);
  height: 100%;
  min-height: 100vh;
}

#introduccion .header {
  background-image: url(../img/photo-01.jpg), url(../img/img-01.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 150px;
}

@media (min-width: 768px) {
  #introduccion {
    background-color: var(--gray-light);
    display: grid;
    grid-template-columns: 220px 1fr;
  }

  #introduccion .header {
    background-size: auto 300px, 90% auto;
    background-position: center top, center bottom 60px;
    height: 100%;
  }
}

/*--------------------
TERMINOS
--------------------*/

#terminos {
  background-color: var(--light);
  height: 100%;
  min-height: 100vh;
}

#terminos .header {
  background-image: url(../img/photo-06.jpg), url(../img/img-01.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 150px;
}

@media (min-width: 768px) {
  #terminos {
    background-color: var(--gray-light);
    display: grid;
    grid-template-columns: 220px 1fr;
  }

  #terminos .header {
    background-size: auto 300px, 90% auto;
    background-position: center top, center bottom 60px;
    height: 100%;
  }
}

/*--------------------
CONFIGURACION
--------------------*/

#configuracion {
  background-color: var(--light);
  height: 100%;
  min-height: 100vh;
}

#configuracion .header {
  background-image: url(../img/photo-02.jpg), url(../img/img-01.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 150px;
}

@media (min-width: 768px) {
  #configuracion {
    background-color: var(--gray-light);
    display: grid;
    grid-template-columns: 220px 1fr;
  }

  #configuracion .header {
    background-size: auto 300px, 90% auto;
    background-position: center top, center bottom 60px;
    height: 100%;
  }
}

/*--------------------
CALCULADORA
--------------------*/

#calculadora {
  background-color: var(--light);
  height: 100%;
  min-height: 100vh;
}

#calculadora .header {
  background-image: url(../img/photo-03.jpg), url(../img/img-02.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 150px;
}

@media (min-width: 768px) {
  #calculadora {
    background-color: var(--gray-light);
    display: grid;
    grid-template-columns: 220px 1fr;
  }

  #calculadora .header {
    background-size: auto 300px, 90% auto;
    background-position: center top, left bottom 120px;
    height: 100%;
  }
}

#calculadora .header.bg-1 {
  background-image: url(../img/photo-03.jpg), url(../img/img-02.png);
}

#calculadora .header.bg-2 {
  background-image: url(../img/photo-04.jpg), url(../img/img-02.png);
}

#calculadora .header.bg-3 {
  background-image: url(../img/photo-05.jpg), url(../img/img-02.png);
}

#calculadora .header.bg-4 {
  background-image: url(../img/photo-06.jpg), url(../img/img-02.png);
}

#calculadora .header.bg-5 {
  background-image: url(../img/photo-07.jpg), url(../img/img-02.png);
}

#calculadora .title-calculator {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 25px;
}

#calculadora .title-calculator > div {
  padding: 15px 20px;
  font-size: 140%;
}

/*--------------------
MODAL
--------------------*/

#modal {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: -1;
  opacity: 0;
  display: grid;
  align-items: center;
  justify-items: center;

  transition-property: all;
  transition-duration: 0.5s;
}

#modal .overlay {
  background: #15181ad6;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
}

#modal .modal-box {
  background-color: var(--light);
  width: 90%;
  max-width: 400px;
  padding: 20px;
  position: relative;
  display: grid;
  gap: 20px;
  text-align: center;
  max-height: 80vh;
  overflow-y: auto;

  display: none;
}

@media (min-width: 768px) {
  #modal .modal-box {
    max-width: 700px;
  }
}

#modal .modal-box.show {
  display: grid;
}

#modal .modal-buttons {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}

#modal.show {
  z-index: 10;
  opacity: 1;
}

#terminos-checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
}

/*--------------------
MENU CALCULADORA
--------------------*/

.menu-calculator {
  position: fixed;
  bottom: 36px;
  left: 0;
  height: 60px;
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  z-index: 1;
  background-color: var(--navy-blue);
  width: 100%;
  padding: 18px;
  justify-items: center;
}

.menu-calculator img {
  height: 24px;
  width: auto;
}

/*--------------------
SECCIONES
--------------------*/

.inductores, .anestesicos, .sala, .adversos, .delirio {
	display: none;
}

.fin {
  display: none;
}

/*--------------------
ETIQUETAS
--------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'effrabold', 'Calibri', sans-serif;
  font-weight: normal;
}

hr {
  height: 1px;
  border-top: none;
  border-bottom: solid 1px var(--gray-light-plus);
}

sup {
  font-size: 65%;
}

/*--------------------
BOX
--------------------*/

.box {
  padding: 20px 20px 56px;
  background-color: var(--light);
}

#calculadora .box {
  padding-bottom: 116px;
}

.logo-bis-color {
  width: 70%;
  max-width: 250px;
  margin: 10px 0 20px;
}

/*--------------------
EDITOR
--------------------*/

.fw-light {
  font-family: 'effralight', 'Calibri', sans-serif !important;
}

.fw-regular {
  font-family: 'effraregular', 'Calibri', sans-serif !important;
}

.fw-bold {
  font-family: 'effrabold', 'Calibri', sans-serif !important;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

.col-1-auto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.col-auto-1 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.btn {
  background-color: var(--sky-blue);
  width: 100%;
  min-height: 45px;
  border: none;
  padding: 10px;
  text-align: center;
  color: var(--light);
  font-weight: bold;
  font-size: 110%;
  font-family: 'effrabold', 'Calibri', sans-serif;
  font-weight: normal;
  display: grid;
  align-content: center;
}

.back-btn {
  background-color: var(--sky-blue);
  background-image: url(../img/icon-arrow-left-white.png);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center;
  width: 45px;
  height: 45px;
  left: 20px;
  top: 20px;
  position: absolute;
  border: none;
  display: grid;
  align-content: center;
}

.color-pri {
  color: var(--cobalt-blue) !important;
}

.color-sec {
  color: var(--navy-blue) !important;
}

.color-light {
  color: var(--light) !important;
}

.color-dark {
  color: var(--dark) !important;
}

.bg-pri {
  background-color: var(--cobalt-blue) !important;
}

.bg-sec {
  background-color: var(--navy-blue) !important;
}

.bg-clear {
  background-color: var(--gray-light-super) !important;
}

.bg-info {
  background-color: var(--gray-light) !important;
}

.bg-total {
  background-color: var(--gray-light) !important;
}

.bg-accent {
  background-color: var(--turquoise) !important;
}

.bg-price {
  background-color: var(--green) !important;
}

.bg-charcoal-gray {
  background-color: var(--charcoal-gray) !important;
}

.bg-dark-gray {
  background-color: var(--dark-gray) !important;
}

.bg-pale-gray {
  background-color: var(--pale-gray) !important;
}

.bg-blue-gray {
  background-color: var(--blue-gray) !important;
}

.bg-light-gray {
  background-color: var(--light-gray) !important;
}

/*--------------------
FONT SIZE
--------------------*/

h1, .h1 {
  font-size: 200%;
}

h2, .h2 {
  font-size: 150%;
}

h3, .h3 {
  font-size: 125%;
}

h4, .h4 {
  font-size: 100%;
}

h5, .h5 {
  font-size: 85%;
}

h6, .h6 {
  font-size: 70%;
}

.display-1 {
  font-size: 220%;
}

.display-2 {
  font-size: 250%;
}

.display-3 {
  font-size: 300%;
}

.display-4 {
  font-size: 350%;
}

.display-5 {
  font-size: 400%;
}

.display-6 {
  font-size: 450%;
}

/*--------------------
FORMULARIOS
--------------------*/

label {
  font-size: 90%;
  margin-bottom: 0;
  display: block;
  color: var(--cobalt-blue);
}

select {
  font-family: 'effraregular', 'Calibri', sans-serif;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px var(--gray-light-plus);
  width: 100%;
  padding: 10px 0;
  font-size: 100%;
  margin-bottom: 20px;
  color: var(--gray-dark-plus);
}

input {
  font-family: 'effraregular', 'Calibri', sans-serif;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px var(--gray-light-plus);
  width: 100%;
  padding: 10px 0;
  font-size: 100%;
  margin-bottom: 20px;
  color: var(--gray-dark-plus);
}

textarea {
  border: solid 1px var(--gray-light-plus);
  width: 100%;
  min-height: 100px;

}

/*--------------------
MAPA
--------------------*/

.map {
  background-image: url(../img/map.png);
  background-repeat: repeat-x;
  background-position: center;
  width: calc(100% + 40px);
  height: calc(100vh - 582px);
  background-size: auto 100%;
  padding: 20px;
  margin: 20px -20px;

  animation-name: map-anim;
  animation-duration: 180s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: scale(1);
}

@media (min-width: 768px) {
  .map {
    height: calc(100vh - 432px);
  }
}


@keyframes map-anim {
  0% {
    background-position: left 0 center;
  }
  100% {
    background-position: left 5000px center;
  }
}

/*--------------------
AUTOCOMPLETE
--------------------*/

.ui-autocomplete {
  background-color: white;
  padding: 15px 0;
  overflow: scroll;
  font-size: 114%;
}

.ui-autocomplete li {
  list-style: none;
  padding: 5px 0;
  color: var(--gray-dark)
}

.ui-autocomplete li:hover {
  color: var(--gray-dark-super)
}

/*--------------------
RESULTADOS Y CAPTURA
--------------------*/

.sigla {
  background-color: var(--cobalt-blue);
  color: var(--light);
}

.nombre {
  background-color: var(--gray-light-super);
}

.tabla_medicamento img {
  width: 100%;
}

.mostrar-captura {
  width: 100%;
  max-width: 600px;
}

.mensaje-enviar {
  font-family: 'effrabold', 'Calibri', sans-serif;
  text-align: center;
  text-transform: uppercase;
  padding: 15px 20px 0;
  display: none;
  color: var(--light-orange);
}

.cargando-captura {
  text-align: center;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
  color: var(--gray);
}

#modal-captura {
  position: absolute !important;
  display: grid !important;
  top: -1000vh;
  overflow: visible;
  max-height: none;
}

#modal-resultados h1,
#modal-resultados h2,
#modal-resultados h3,
#modal-resultados h4,
#modal-resultados h5,
#modal-resultados h6,
#modal-captura h1,
#modal-captura h2,
#modal-captura h3,
#modal-captura h4,
#modal-captura h5,
#modal-captura h6 {
  margin: 0 0 5px;
}

#modal-resultados h5,
#modal-resultados h6,
#modal-captura h5,
#modal-captura h6 {
  font-family: 'effraregular', 'Calibri', sans-serif;
}

#modal-resultados .nombre-clinica h5,
#modal-captura .nombre-clinica h5 {
  font-family: 'effrabold', 'Calibri', sans-serif;
  font-size: 180%;
  color: var(--cobalt-blue);
  margin-bottom: 12px;
}

#modal-resultados .tipo-cirugia h5,
#modal-captura .tipo-cirugia h5,
#modal-resultados .Peso-paciente h5,
#modal-captura .Peso-paciente h5,
#modal-resultados .duracion-procedimiento h5,
#modal-captura .duracion-procedimiento h5,
#modal-resultados .proc-mes h5,
#modal-captura .proc-mes h5 {
  font-size: 150%;
  color: var(--cobalt-blue);
}

#modal-resultados .table-til [class*="col-"],
#modal-captura .table-til [class*="col-"] {
  background-color: var(--cobalt-blue);
  color: var(--light);
  padding: 5px 10px;
  margin: 12px 0 2px;
}

#modal-resultados .table-cont [class*="col-"],
#modal-captura .table-cont [class*="col-"] {
  background-color: var(--gray-light-super);
  color: var(--gray-dark);
  padding: 0.8vh 10px;
  margin: 0 0 2px;
  font-size: 2vh;
}

#modal-resultados .table-til h5,
#modal-resultados .table-cont h5,
#modal-captura .table-til h5,
#modal-captura .table-cont h5 {
  margin: 0;
}

#modal-resultados .cotenido-dim-resul,
#modal-resultados .cotenido-dim-resul,
#modal-resultados .cotenido-resul,
#modal-resultados .cotenido-resul {
  font-family: 'effrabold', 'Calibri', sans-serif;
}

#modal-resultados {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 9px;
}

#modal-resultados .modal-buttons {
  align-self: end;
}

#modal-resultados .header .header-box {
  background-color: #1010EB;
  padding: 14px 4%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px
}

#modal-resultados .header .logo-medtronic {
  height: 14px;
}

#modal-resultados .header .link-referencias {
  color: white;
  cursor: pointer;
  font-size: 120%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

#modal-resultados .header .icono-copiar {
  height: 14px;
}

#modal-resultados .header .respuesta {
  padding-right: 6px;
  opacity: 0;
  transition: all 0.3s;
}

#modal-resultados .modal-content {
  padding: 15px 4%;
}