/*
Theme Name: Facturacion Online
Author: UPC Tchnologies
Version:1.0
*/

:root {
  --btn-bg: #0000eae0;
  --white: #fff;
  --cuveTransition: cubic-bezier(0, 0.85, 0.68, 1.23);
  --bxShadow: 2px 4px 4px 2px #000000c0;
  --inputBg: #d6d6d66b;
  --svgFilter: invert(14%) sepia(97%) saturate(2881%) hue-rotate(191deg)
    brightness(99%) contrast(102%);
  --warning: #e9f952;
  --error: #f95252;
  --success: #52f994;
  --tableTextColor: #c1a774;
}
* {
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
}

body {
  font-family: "Roboto", sans-serif;
}

main,
section header,
section.header,
section.banner,
section form,
form .row,
.row .row-item,
section.form,
.subtotales,
.message,
.inputs,
.modal-address-selector,
.modal-address-selector .theader,
.modal-address-selector .tbody,
.modal-address-selector .tfooter,
.tbody .row {
  display: -ms-grid;
  display: grid;
}
main {
  /* -ms-grid-columns: (1fr) [2]; */
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
    "header header banner"
    "form form  banner";
  height: 100vh;
}
section.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: header;
  -ms-grid-column-span: 1;
  grid-column: span 1;
}
.message {
  max-height: 200px;
  height: 24px;
  max-width: 500px;
  width: 400px;
  border-radius: 8px;
  /* -ms-grid-columns: auto 20px;
  grid-template-columns: auto 20px; */
      grid-template-areas: "micon mcontent bclose";
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  position: fixed;
  gap: 30px;
}
svg:hover {
  cursor: pointer;
}
.message.large {
  height: 116px;
  /* text-align: center; */
  padding: 12px;
  width: auto;
}
section header {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-grid-columns: 1fr 1fr 60px;
  grid-template-columns: 1fr 1fr 60px;
  -ms-flex-line-pack: center;
  align-content: center;
  justify-items: center;
}
.message > .mheader {
  grid-area: mheader;
}
.message-text {
  grid-area: mcontent;
}
h1.title,
label {
  color: var(--textColor);
  font-size: 14px;
  font-weight: 400;
  width: 100%;
}
h1.title {
  text-align: end;
  font-size: 24px;
}
section.form {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: form;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  padding-right: 60px;
  padding-left: 40px;
  padding-bottom: 60px;
  &:has(> .message.large) {
    -ms-grid-rows: 100px;
    grid-template-rows: 100px;
  }
}
section.banner {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
  grid-area: banner;
  -ms-grid-row-span: 3;
  grid-row: span 3;
  -ms-grid-column-span: 1;
  grid-column: span 1;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
}

section form {
  -ms-grid-rows: 2fr 0px 2fr 0px 2fr 0px 2fr 0px 2fr 0px 2fr 0px 2fr 0px 2fr;
  grid-template-rows: repeat(4, 2fr 2fr);
  gap: 0px;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  position: relative;
}
section.client form {
  -ms-grid-rows: 1fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr 4px
    1fr 4px 1fr 4px 1fr;
  grid-template-rows: repeat(12, 50px);
  -ms-grid-columns: 1fr 12px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  &:has(.row.full > .inputs ){
    -ms-grid-rows: 50px 50px 50px 76px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: repeat(3,50px) 76px repeat(8,50px);
  }
}
section.client form > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(5) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(6) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(7) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(8) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(9) {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(10) {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(11) {
  -ms-grid-row: 11;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(12) {
  -ms-grid-row: 11;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(13) {
  -ms-grid-row: 13;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(14) {
  -ms-grid-row: 13;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(15) {
  -ms-grid-row: 15;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(16) {
  -ms-grid-row: 15;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(17) {
  -ms-grid-row: 17;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(18) {
  -ms-grid-row: 17;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(19) {
  -ms-grid-row: 19;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(20) {
  -ms-grid-row: 19;
  -ms-grid-column: 3;
}
section.client form > *:nth-child(21) {
  -ms-grid-row: 21;
  -ms-grid-column: 1;
}
section.client form > *:nth-child(22) {
  -ms-grid-row: 21;
  -ms-grid-column: 3;
}

.row.buttons {
  -ms-grid-row: 11;
  -ms-grid-row-span: 1;
  grid-row: -2/-1;
  -ms-grid-column: 2;
  grid-column: 2/2;
  -ms-grid-row-align: center;
  align-self: center;
}
form .row {
  &:has(> .row-item) {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  &:has(> i) {
    -ms-grid-columns: 1fr 2fr 30px;
    grid-template-columns: 1fr 2fr 30px;
  }
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
  height: 30px;
  position: relative;
}
form .row.date {
  -ms-grid-columns: 3fr 2fr 34px;
  grid-template-columns: 3fr 2fr 34px;
}
svg {
  height: 24px;
  width: 24px;
  margin-left: 6px;
}
.st0,
.st1,
.st2 {
  stroke: var(--svgColor) !important;
}
.st2 {
  fill: var(--svgColor) !important;
}

.row.full {
  -ms-grid-column-span: 2;
  grid-column: span 2;

  &:has(> .inputs) {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 8px 2fr;
    grid-template-rows: 1fr 2fr;
    gap: 8px;
  }

  &:has(> .inputs) > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  &:has(> .inputs) > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  -ms-grid-columns: 1fr 8px 5fr;
  grid-template-columns: 1fr 5fr;
  justify-items: legacy;
}
.row .row-item {
  /* -ms-grid-columns: (1fr) [2]; */
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

form .row:last-child {
  -ms-grid-columns: 10fr 1fr;
  grid-template-columns: 10fr 1fr;
}

form .row.client {
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}
.button {
  color: white;
  border: none;
  background-color: var(--textColor);
  -webkit-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  -o-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition), box-shadow 0.8s var(--cuveTransition);
  -webkit-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  -webkit-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  -webkit-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  -webkit-transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition), -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition), -webkit-box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition), box-shadow 0.8s var(--cuveTransition);
  transition: background 0.8s var(--cuveTransition),
    color 0.8s var(--cuveTransition), box-shadow 0.8s var(--cuveTransition),
    -webkit-box-shadow 0.8s var(--cuveTransition);
  position: relative;

  &:hover {
    cursor: pointer;
    color: white;
    -webkit-box-shadow: var(--bxShadow);
    box-shadow: var(--bxShadow);
    font-size: 30px;
  }
}
.row.full.address label {
  grid-area: text;
}
.row.full.address input {
  grid-area: input;
}
.row.full.address a.select-address {
  grid-area: button;
}

.row.full.address {
      grid-template-areas:
            "text input";
  &:has(
      a.select-address) {
        grid-template-areas: "text input button";
      -ms-grid-columns: 1fr 4fr 1fr;
      grid-template-columns: 1fr 4fr 1fr;
  }
  &:has(
      a.hidden) {
        grid-template-areas: "text input";
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  }
}
.button.submit {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/07/arrow.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  &:hover {
    color: white;
  }
}
.button.generar.submit{
  background-image:none;
}
.button.generar {
  height: 40px;
  width: 200px;
  border-radius: 6px;
  font-size: 18px;
  text-align: start;
  padding-left: 23px;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
.row select {
  outline: none;
  color: var(--textColor);
  border-radius: 4px;
  -webkit-transition: background 0.7s ease, border 0.7s ease;
  -o-transition: background 0.7s ease, border 0.7s ease;
  transition: background 0.7s ease, border 0.7s ease;
  padding-left: 6px;
  border: 0;
  background-color: var(--inputBg);

  &:focus {
    background-color: var(--white);
    border: 1px solid var(--inputBg);
  }
}
#total{
  text-align: right;
  padding-right: 6px;
}
.mask{
  width: 100vw;
  height: 100%;
  position: fixed;
  background-color: #0000003f;
  top: 0;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  left: 0;
  right: 0;
}
.loader{
  background-color: #fff;
  height: 50px;
  width: 260px;
  border-radius: 4px;
  border:1px solid #24333c;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5fr;
  grid-template-columns: 1fr 5fr;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loader-inner{
  width: 18px;
  padding: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1b54ac;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  -webkit-animation: l3 0.6s infinite linear;
          animation: l3 0.6s infinite linear;
}
@-webkit-keyframes l3 {to{-webkit-transform: rotate(1turn);transform: rotate(1turn)}}
@keyframes l3 {to{-webkit-transform: rotate(1turn);transform: rotate(1turn)}}
.hidden {
  display: none;
}
.submessage {
  text-align: right;
  width: 100%;
  position: absolute;
  bottom: -18px;
  left: 0;
  color: red;
  font-size: 12px;
  -ms-grid-row-span: 2;
  grid-row: span 2;
}
.row select {
  width: 100%;
}
.row select {
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
.row select:focus{
  border:1px solid var(--textColor);
  border-radius:6px;
}
img {
  height: 60px;
}
/* i {
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  -webkit-filter: var(--svgFilter);
  filter: var(--svgFilter);
}
i.calendar {
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/06/calendar-1.svg);
} */
.subtotales {
  background-color: var(--bgColor);
  height: 140px;
  width: 170px;
  -ms-grid-column: 2;
  grid-column: 2/2;
  grid-row: -2/-5;
  border-radius: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-grid-column-align: end;
  justify-self: end;
  padding: 0 24px;
      grid-template-areas:
    "descriptionsub valuesub"
    "descriptioniva valueiva"
    "descriptiontotal valuetotal";
  &.impLocales{
          grid-template-areas:
    "descriptionsub valuesub"
    "descriptioniva valueiva"
    "descriptionimp valueimp"
    "descriptiontotal valuetotal";
  }
}

/* .subtotales > .row {
  grid-template-columns: repeat(2, 1fr);
  height: auto;
  &:last-child {
    grid-template-columns: 1fr 1fr;
  }
}
 */
.subtotales .value {
  text-align: end;
  color: var(--textColor);
}
.subtotales {
  background-color: var(--bgColor);
}
.describe {
  color: var(--textColor);
}
.subtotales .describe {
  text-align: start;
}
.value.sub {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: valuesub;
}
.describe.sub {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: descriptionsub;
}
.value.iva {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: valueiva;
}
.describe.iva {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: descriptioniva;
}
.describe.imp {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: descriptionimp;
}
.value.imp {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: valueimp;
}
.value.total {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: valuetotal;
}
.describe.total {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: descriptiontotal;
}
.cents {
  font-size: 10px;
}
.describe {
  font-size: 16px;
  font-weight: 600;
}
section.message h1.text {
  color: var(--textColor);
  grid-area: mcontent;
  font-size: 16px;
  font-weight: 400;
}
section.message > span {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  position: relative;
  left: 0;
  z-index: 1;
  grid-area: micon;
}
section.message.warning > span,
section.message.error > span,
section.message.success > span {
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/07/exclamationsign.svg);
  background-repeat: no-repeat;
  background-size: 5px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-position: center, center;

  /* background-color: var(--warning); */
}

section.message .remove {
  height: 24px;
  width: 24px;
  grid-area: bclose;
  position: absolute;
  top: -6px;
  right: -8px;
  color: var(--textColor);
  text-decoration: none;
  -webkit-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  opacity: 0.5;

  &:hover {
    opacity: 1;
    color: white;
  }
}
section.message .remove svg {
  height: 12px;
  width: 12px;
  margin: auto;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/06/calendar-1.svg);
  width: 24px;
  height: 24px;
}
.inputs {
  width: 100%;
  height: 32px;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.modal-address-selector {
  border: 1px solid var(--inputColor);
  border-radius: 6px;
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
      grid-template-areas:
    "tfoot tfoot tfoot"
    "theader theader theader"
    "tbody tbody tbody";
  z-index: 2;
  max-height: 200px;
  max-width: 360px;
  -ms-grid-rows: 2fr 10px 1fr 10px 3fr;
  grid-template-rows: 2fr 1fr 3fr;
  overflow: hidden;
  gap: 10px 0px;
  margin: auto auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 14px;
}
.theader {
  -ms-grid-row: 3;
  gap: 4px;
  grid-area: theader;
}
.theader {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.theader .title {
  font-size: 14px;
  font-weight: 370;
  &:first-child {
    padding-left: 10px;
    text-align: left;
  }
  &:last-child {
    padding-right: 18px;
  }
}
/* .theader,
.tbody .row {
  -ms-grid-columns: (1fr) [8];
  grid-template-columns: repeat(8, 1fr);
} */
.tbody .row {
  height: 26px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: background 1s ease;
  -o-transition: background 1s ease;
  transition: background 1s ease;
  gap: 4px;
  &:hover {
    cursor: pointer;
    background-color: var(--bgColor);
    border-radius: 0 0 2px 2px;
  }
}
.tbody .column {
  color: var(--tableTextColor);
  text-align: center;
  font-weight: 370;
  &:first-child {
    text-align: left;
  }
}
.tbody {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-area: tbody;
  border-radius: 4px;
  max-height: 100px;
  overflow: hidden;
  overflow-y: scroll;
  gap: 8px;
  border: 1px solid var(--inputColor);
  padding: 6px 0px 0px 6px;
}
.tfooter {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: tfoot;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.tfooter .title {
  font-size: 16px;
  font-weight: 400;
}
.modal-address-selector-shadow,
.message-shadow {
  position: fixed;
  z-index: 1;
  background-color: #00000050;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.tbody .row .list-row {
  color: var(--tableTextColor);
}
.calendar-table th,
.calendar-table td,
.month select {
  color: var(--textColor);
}
.calendar-table tbody th,
.calendar-table tbody td {
  &:hover {
    color: white !important;
    background-color: var(--textColor) !important;
  }
}
.month select {
  outline: none;
  border-color: var(--inputBg);
  border-radius: 2px;
  background-color: var(--inputBg);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--textColor) !important;
}
.icon {
  display: block;
  height: 24px;
  width: 24px;
  position: absolute;
  right: 10px;
  top: 8px;
}
.icon.icon-check {
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/07/success.svg);
  background-repeat: no-repeat;
  background-position: center center;
}
/* Media queries */
@media (max-width: 900px) {
  main {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
        grid-template-areas:
      "banner banner banner"
      "header header header"
      "form form form";
    -ms-grid-rows: 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr 2fr;
  }
  section.header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: header;
    -ms-grid-column-span: 3;
    grid-column: span 3;
    padding: 16px 0;
  }
  section.form {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: form;
    -ms-grid-row-span: 1;
    grid-row: span 1;
    -ms-grid-column-span: 1;
    grid-column: span 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  section.banner {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    grid-area: banner;
    -ms-grid-row-span: 1;
    grid-row: span 1;
    height: 210px;
  }
 
  section.header {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  section.form {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  section.banner {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  
  .banner img {
    width: 100%;
    height: 210px;
  }
  section form {
    -ms-grid-rows: 1fr 24px 1fr 24px 1fr 24px 1fr;
    grid-template-rows: repeat(2, 1fr 1fr);
    height: 480px;
    gap: 24px;
  }
  form .row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 0 1fr;
    grid-template-rows: 1fr 1fr;
    height: 50px;
    gap: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  form .row > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  form .row > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  .row select {
    height: 40px;
  }
  section header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* height: auto; */
    justify-content: space-between;
    /* gap: 0px; */
    /* width: 100%; */
  }
  section.client form {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr
      16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr;
    grid-template-rows: repeat(15, 1fr);
    gap: 16px 0;
  }
  section.client form > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(3) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(4) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(5) {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(6) {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(7) {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(8) {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(9) {
    -ms-grid-row: 17;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(10) {
    -ms-grid-row: 19;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(11) {
    -ms-grid-row: 21;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(12) {
    -ms-grid-row: 23;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(13) {
    -ms-grid-row: 25;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(14) {
    -ms-grid-row: 27;
    -ms-grid-column: 1;
  }
  section.client form > *:nth-child(15) {
    -ms-grid-row: 29;
    -ms-grid-column: 1;
  }
  .row.full {
    -ms-grid-column-span: 1;
    grid-column: span 1;
    -ms-grid-rows: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .row.full > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .row.full > *:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .subtotales {
    -ms-grid-column: 1;
    grid-column: 1/1;
    -ms-grid-row: 14;
    grid-row: 14/14;
  }
 .row.full.address{
    grid-template-areas:
      "text"
      "input"
    ;
  }
  .row.buttons {
    -ms-grid-row: 15;
    grid-row: 15/15;
    -ms-grid-column: 1;
    grid-column: 1/1;
  }
  .subtotales > .row {
    -ms-grid-columns: 1fr 28px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: repeat(1, 1fr);
    height: 30px;

    &:last-child {
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
    }
    gap: 28px;
  }
  .subtotales > .row > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .subtotales > .row > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }

  section.header {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  section.form {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  section.banner {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }

}
.select-address {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: var(--textColor);
  background-image: url(https://solmarfl.atica.mx/wp-content/uploads/2024/07/home.svg);
  background-position: center center;
  background-size: 28px;
  background-repeat: no-repeat;
  margin-left: 28px;
  -webkit-transition: background 0.8s
    linear(
      0 0%,
      0.22 2.1%,
      0.86 6.5%,
      1.11 8.6%,
      1.3 10.7%,
      1.35 11.8%,
      1.37 12.9%,
      1.37 13.7%,
      1.36 14.5%,
      1.32 16.2%,
      1.03 21.8%,
      0.94 24%,
      0.89 25.9%,
      0.88 26.85%,
      0.87 27.8%,
      0.87 29.25%,
      0.88 30.7%,
      0.91 32.4%,
      0.98 36.4%,
      1.01 38.3%,
      1.04 40.5%,
      1.05 42.7%,
      1.05 44.1%,
      1.04 45.7%,
      1 53.3%,
      0.99 55.4%,
      0.98 57.5%,
      0.99 60.7%,
      1 68.1%,
      1.01 72.2%,
      1 86.7%,
      1 100%
    );
  -o-transition: background 0.8s
    linear(
      0 0%,
      0.22 2.1%,
      0.86 6.5%,
      1.11 8.6%,
      1.3 10.7%,
      1.35 11.8%,
      1.37 12.9%,
      1.37 13.7%,
      1.36 14.5%,
      1.32 16.2%,
      1.03 21.8%,
      0.94 24%,
      0.89 25.9%,
      0.88 26.85%,
      0.87 27.8%,
      0.87 29.25%,
      0.88 30.7%,
      0.91 32.4%,
      0.98 36.4%,
      1.01 38.3%,
      1.04 40.5%,
      1.05 42.7%,
      1.05 44.1%,
      1.04 45.7%,
      1 53.3%,
      0.99 55.4%,
      0.98 57.5%,
      0.99 60.7%,
      1 68.1%,
      1.01 72.2%,
      1 86.7%,
      1 100%
    );
  transition: background 0.8s
    linear(
      0 0%,
      0.22 2.1%,
      0.86 6.5%,
      1.11 8.6%,
      1.3 10.7%,
      1.35 11.8%,
      1.37 12.9%,
      1.37 13.7%,
      1.36 14.5%,
      1.32 16.2%,
      1.03 21.8%,
      0.94 24%,
      0.89 25.9%,
      0.88 26.85%,
      0.87 27.8%,
      0.87 29.25%,
      0.88 30.7%,
      0.91 32.4%,
      0.98 36.4%,
      1.01 38.3%,
      1.04 40.5%,
      1.05 42.7%,
      1.05 44.1%,
      1.04 45.7%,
      1 53.3%,
      0.99 55.4%,
      0.98 57.5%,
      0.99 60.7%,
      1 68.1%,
      1.01 72.2%,
      1 86.7%,
      1 100%
    );
  &:hover {
    background-size: 24px;
  }
}
@media (max-width: 800px) {
  main {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
        grid-template-areas:
      "banner banner banner"
      "header header header"
      "form form form";
    -ms-grid-rows: 0fr 0fr 2fr;
    grid-template-rows: 0fr 0fr 2fr;
  }
  section.client form{
    &:has(.row.full > .inputs){
      -ms-grid-rows: 50px 50px 50px 120px 50px 50px 50px 50px 50px 50px 50px 50px;
      grid-template-rows: repeat(3,50px) 100px repeat(8,50px);
    }
  }
  .row.full:has(> .inputs) {
    height: 100px;
    -ms-grid-rows: 1fr 4fr;
    grid-template-rows: 1fr 4fr;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }
  .inputs {
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: (1fr)[2];
    grid-template-rows: repeat(2, 1fr);
  }
  section.form {
    padding: 0 20px 0 20px;
  }
  .row.full.address {
    grid-template-rows:1fr 1fr;
    &:has(
    a.select-address) {
          grid-template-areas:
        "text text text"
        "input input button";
    }
    &:has(
    a.hidden) {
          grid-template-areas:
        "text"
        "input";
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    }
  ;
    /* grid-template-columns: 1fr 4fr; */
    grid-template-rows: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  section form {
    max-width: 360px;
  }
  .message {
    width: 300px;
  }
  img{
    height:40px;
  }
  h1.title{
    font-size:20px;
  }
}
.empty{
  border: 1px solid red !important;
  border-radius: 4px;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.removeEmpty{
  border:0;
  border-radius: 0;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.debug{
  display: none;
  border: 1px solid blue !important;
  background-color: #fff;
  height: 550px;
  width: 350px;
  position: fixed;
  overflow: hidden;
  overflow-y: scroll;
  z-index: 4;
  font-size: 14px;
  font-family: monospace;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #0489a9 transparent;
  right: 0;
}