@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100..900&family=Poppins:wght@400;500&display=swap');

body {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: auto;
    box-sizing: border-box;
}

header {
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 72px;
    box-shadow: 0 0 18px -2px #33333321;
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: nowrap;
    font-weight: 500;
    width: 55%;
    max-width: 690px;
    align-items: center;
}

.step {
    flex: 1;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
    font-size: 14px;
    color: #808080;
    background-color: transparent;
}

h2 {
    color: #000000;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: bold;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 16px;
    color: #65676B;
    margin-top: 0;
}

.product-selection {
    display: flex;
    justify-content: space-between;
}
#logotipo {
    width: 338px;
    margin-bottom: 48px;
}
.product {
    width: 48%;
    border: 2px solid #d9d9d9;
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
}

.product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.product-info h3 {
    margin: 10px 0;
    font-size: 18px;
    color: #333;
    display: flex;
    flex-direction: row;
}

.product-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #555;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
    flex: calc(50% - 20px);
}

.form-group input, .form-group select {
    margin-right: 10px;
    margin-bottom: 5px;
    width: 100%;
    height: 54px;
    padding: 8px 12px 8px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 13px;
    border: 1px solid #B5B7C5;
    border-radius: 8px;
    box-sizing: border-box;
}

.form-group input[type="date"] {
    width: 100%;
}

.form-buttons {
    align-items: center;
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    column-gap: 20px;
}

.btn {
    background-color: #0072E9;
    border-radius: 8px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.3px;
    padding: 10px 38px;
    margin-top: 20px;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border: 1px solid #0072E9;
    transition: all 0.2s;
}

.btn img {
    margin-right: 10px;
    width: 16px;
}

.btn:hover {
    background-color: #014171;
}

.btn-secondary {
    background-color: #fff;
    border-radius: 8px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.3px;
    padding: 10px 38px;
    margin-top: 20px;
    color: #014171;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border: 1px solid #014171;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: #fff;
}

.botvertarifas {
    background: none;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 16px;
    padding: 0;
    color: #0072E9;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s;
}

.botvertarifas img {
    margin-bottom: -4px;
    margin-right: 5px;
}

.containerleft #main-form {
    padding-bottom: 42px;
    margin-bottom: 42px;
    border-bottom: 1px solid #eaeaea;
}
.worker {
    justify-content: space-between;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 20px 32px 20px;
}
#popnoregistro .popcontent {
    display: flex;
    flex-direction: column;
}

.popbanner {
    padding: 42px 20px;
    text-align: center;
}

#popnoregistro .popbanner {
    background: #FFF1F1;
}
#popregistro .popbanner {
    background: #7ECBFF;
}

#popregistro .popinfo p {
    margin-bottom: 8px;
    margin-top: 0;
    color: #65676B;
}

#popregistro .popinfo p b {
    color: #000;
}



#poptarifas .tabs {
    display: flex;
    margin-bottom: 20px;
    background-color: #f1f1f1;
    border-radius: 8px;
}

#poptarifas .tab-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: #333;
    transition: background-color 0.3s;
    width: 50%;
    border-radius: 8px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

#poptarifas .tab-button.active {
    background-color: #0072E9;
    color: #fff;
}

#poptarifas .tabs:has(.tab-button:not(.active):hover) {
    background: #e6e6e6;
}

#poptarifas .tabs {
    transition: background-color 0.3s;
}

#poptarifas .tab-content {
    display: none;
    max-width: 500px;
}

#poptarifas .tab-content.active {
    display: block;
}

#poptarifas table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}
#poptarifas tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
}
#poptarifas tbody {
    color: #65676B;
}
#poptarifas tbody tr:nth-child(odd) td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#poptarifas tbody tr:nth-child(odd) td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


#poptarifas th, #poptarifas td {
    padding: 12px 15px;
    text-align: left;
}

#poptarifas th {
    color: #014171;
    font-weight: 500;
    font-size: 18px;
}

#poptarifas td:last-child {
    text-align: center;
}

#poptarifas thead th:last-child {
    width: 100px; 
    text-align: center;
}

#poptarifas tr:last-child td {
    border-bottom: none;
}

#poptarifas .popinfo {
    text-align: left;
    padding: 0;
}

#poptarifas h2 {
    margin-left: 0;
    line-height: 1.2;
}
#poptarifas .popupbox {
    max-width: 442px;
}

#poptarifas #KME {
    max-height: 342px;
    overflow: auto;
}


.popinfo {
    padding: 7% 8%;
    text-align: center;
}

.popinfo h2 {
    max-width: 392px;
    margin-left: auto;
    margin-right: auto;
}
/*PASO 4*/
.summary {
    margin-top: 20px;
    border-radius: 16px;
    padding: 20px;
    background-color: #fff;
}

.summary table {
    width: 100%;
    border-collapse: collapse;
}

.summary th, .summary td {
    text-align: left;
    padding: 10px;
}

.summary th {
    font-weight: bold;
    text-align: center;
}

.summary tfoot td {
    font-weight: bold;
}

div#maincontent {
    width: 100%;
    margin: 0 auto;
    flex: 1;
    background: 
    linear-gradient(180deg, rgba(231,241,252,1) 45%, rgba(180,210,245,1) 100%);
    padding-top: 20px;
    position: relative;
}

div#maincontent:not(.intro):before {
    content: "";
    background: url('/src/img/fondoprincipal.svg');
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 430px;
    height: 420px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

img.mainlogo {
    width: 205px;
}

.logopefectivo img {
    width: 128px;
}

.logopefectivo {
    display: flex;
    align-items: center;
}

.logopefectivo span {
    font-size: 13px;
    color: #808080;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    margin-right: 10px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.form-builder {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.step span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    margin-right: 15px;
    border: 1px solid #CCD5E7;
    background: #f8f9fa;
}

.step.active span {
    background: #00B4E3;
    border-color: #00B4E3;
    color: #fff;
}

.cita_infobox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: nowrap;
    font-weight: 500;
    width: 38%;
    padding: 32px 48px 42px;
    background: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}
.cita_infobox h2 {
    font-size: 29px;
    margin-top: 0;
}
.infodato {
    background: #E9F6FF;
    border-radius: 10px;
    padding: 14px 14px;
    position: relative;
    padding-left: 48px;
    margin: 0;
}

.infodato img {
    position: absolute;
    left: 15px;
    top: calc(50% - 10px);
}

div#maincontent > .container {
    padding: 38px 15px 20px;
    z-index: 1;
    position: relative;
}

.step.completed span:before {
    background-image: url(/src/img/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    display: block;
    height: 40px;
    position: absolute;
    width: 40px;
}

.step.completed span {
    background: #00B4E3;
    border-color: #00B4E3;
    color: #00B4E3;
    position: relative;
    font-size: 0;
}

.form-mainbox {
    width: 62%;
    background: #fff;
    border-radius: 20px;
    padding: 42px 48px 42px;
    box-sizing: border-box;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

.form-container h2 {
    font-size: 28px;
    margin-top: 0;
}

.form-container h2 span {
    color: #00B4E3;
    display: block;
    font-size: 21px;
}

.containerleft .input-container {
    display: flex;
    gap: 5px;
}

.containerleft .input-container input {
    width: 68px;
    height: 80px;
    font-size: 24px;
    text-align: center;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px;
}

.fieldsbox {
    display: flex;
    column-gap: 20px;
    flex-flow: row wrap;
}

.btn.primary:hover {
    background: #014171;
    color: #fff;
    border-color: #014171;
}

html {
    min-height: 100%;
}

body:before {
    content: "";
    background-image: url(/src/img/gradiente.png);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.step-indicator .step img {
    margin-right: 10px;
}

.step-indicator .step {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
}

.step-indicator .step.active:before {
    background: #dff2f8;
    width: 40px;
}

.step-indicator .step.completed:before {
    background: #dff2f8;
    width: 2px;
}

.custom-checkbox {
    display: none;
}

.custom-checkbox + label .custom-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #7FBC00;
    border-radius: 4px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    vertical-align: middle;
}

.custom-checkbox:checked + label .custom-checkbox-box::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 2px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: url(/src/img/checkoptions.svg);
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.5);
}

/* Estilo para el checkbox deshabilitado */
.custom-checkbox:disabled + label .custom-checkbox-box {
    background-color: #e9ecef !important;
    border-color: #adb5bd;
}

.custom-checkbox:disabled:checked + label .custom-checkbox-box::before {
    background: url(/src/img/checkoptions.svg);
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1);
}

.check-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
}

.product {
    padding: 0;
    position: relative;
    box-sizing: border-box;
    transition: all 0.2s;
}

.product-info > img {
    width: 100%;
    height: unset;
    margin-bottom: 24px;
}

.product label {
    height: 100%;
    display: block;
    padding: 6% 8%;
    max-height: 100%;
    box-sizing: border-box;
}

.optional {
    color: #fff;
    background: #00B4E3;
    padding: 5px 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    font-size: 11px;
    border-radius: 4px;
    margin-left: 10px;
}

.custom-checkbox:checked + label .custom-checkbox-box {
    background: #7FBC00;
}

.product:not(.disable):hover {
    border-color: #7fbc00;
}

.product:not(.disable) label {
    cursor: pointer;
}

.product:not(.disable):has(.custom-checkbox:checked) {
    border-color: #7fbc00;
}

.product-info ul img {
    width: 22px;
    margin-right: 8px;
}

.product-info ul li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    text-align: left;
    margin-bottom: 13px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 14px;
    line-height: 1.3;
}

.product:not(.disable) .product-info ul li {
    color: #000000;
}

.product.disable .product-info ul li {
    color: #4C4C4C;
}

button.btn.back {
    background-color: #ffffff;
    color: #012F87;
    border: 1px solid #012F87;
}

button.btn.back img {
    margin-left: 0;
    margin-right: 10px;
}

#fileUpload {
    display: none;
}

.worker-list {
    margin-top: 20px;
}

.hidden {
    display: none !important;
}

.buttonsbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.btn-secondary img {
    margin-right: 10px;
    margin-left: 0px;
    width: 20px;
}

h4 {
    margin-top: 0;
}

div#manualEntry {
    background: #fff;
    border-radius: 18px;
    padding: 28px 38px 38px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
}

div#manualEntry h4 {
    width: 100%;
    font-size: 18px;
}

div#manualEntry .form-group {
    flex: calc(33.3333% - 20px);
}

div#manualEntry .form-group.csp {
    flex: calc(50% - 20px);
}

div#manualEntry button.btn img {
    width: 13px;
}

.workerbox > p {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
}

.datos {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    font-size: 14px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    align-items: center;
}

.datos span {
    color: #ADADAD;
}

.datos button {
    margin-left: auto;
}

.summary thead img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: -4px;
}

.summary thead th {
    vertical-align: bottom;
    padding: 0 10px;
}

.summary table {
    border-spacing: 0;
}

.summary th.bodyth {
    min-width: 200px;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #4C4C4C;
}

.summary {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

.summary tbody th {
    padding: 15px 10px;
}

.summary tbody tr {
    border-bottom: 1px solid #eee;
}

.summary tbody td, .summary tfoot td {
    text-align: center;
}

.summary tfoot th {
    text-align: left;
}

.summary tfoot td {
    font-weight: 600;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 18px;
    color: #012F87;
}

th.headth {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-weight: 600;
}

.summary tfoot th, .summary tfoot td {
    padding: 16px 10px;
}

.textconfirmation {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 14px;
    margin-bottom: 32px;
}

.textconfirmation b {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

.textconfirmation h3 {
    margin-bottom: 0;
}

button.btn.close {
    background: transparent;
    padding: 0;
    color: #012F87;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all 0.2s;
    border: none;
}

button.btn.close img {
    margin-right: 10px;
    margin-left: 0;
    width: 15px;
}

button.btn.close:hover {
    transform: scale(1.05);
}

div#maincontent.intro {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-height: 100vh;
    padding-top: 0;
    box-sizing: border-box;
}

.containerright {
    width: 50%;
    background: url(/src/img/fondo-intro.jpg);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.containerleft {
    width: 50%;
}

img.logointro {
    position: absolute;
    left: 0;
    top: 0;
}

img.mariposaintro {
    position: absolute;
    bottom: 0;
    left: 0;
}

img.fototrabajador {
    width: 562px;
    max-width: 100%;
}

.containerleft {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.containerleft .form-builder {
    justify-content: center;
}

.intro .form-group {
    flex: 100%;
}

.intro .form-mainbox {
    width: 100%;
}

.intro .form-container {
    max-width: 500px;
}

.form-group.custom-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.form-group.custom-checkbox-group input {
    width: unset;
    height: unset;
}

.form-group.custom-checkbox-group {
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
}

.form-group.custom-checkbox-group label {
    display: block;
    font-weight: normal;
    color: #333;
    cursor: pointer;
    pointer-events: all;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 13px;
    position: unset;
}

.custom-checkbox-group input[type="checkbox"] {
    display: none;
}

.custom-checkbox-group .custom-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 2px solid #8797B6;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    transition: all 0.2s;
}

.custom-checkbox-group input[type="checkbox"]:checked + label .custom-checkbox {
    background-color: #80BC00;
    border: 2px solid #80BC00;
}

.custom-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox-group input[type="checkbox"]:checked + label .custom-checkbox:after {
    display: block;
}

.custom-checkbox-group .custom-checkbox:after {
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-group.custom-checkbox-group label:hover span.custom-checkbox {
    background-color: #E7E7E7;
}

.custom-checkbox-group input[type="checkbox"]:checked + label:hover .custom-checkbox {
    background-color: #76AE00;
    border-color: #76AE00;
}

.containerleft .form-container h2 {
    font-size: 38px;
    max-width: 308px;
    margin-bottom: 28px;
}

.containerleft .form-container > p {
    line-height: 1.5;
    font-size: 15px;
    font-weight: 500;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    color: #65676B;
}

.custom-checkbox-group input[type="checkbox"].invalid + label .custom-checkbox {
    border: 2px solid #F44336;
}

.custom-checkbox-group input[type="checkbox"].invalid + label {
    color: #F44336;
}

.custom-checkbox-group input[type="checkbox"]:checked.invalid + label .custom-checkbox {
    border: 2px solid #80BC00;
}

.custom-checkbox-group input[type="checkbox"]:checked.invalid + label {
    color: #000000;
}

.du_customerror {
    font-size: 13px;
    font-weight: 400;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    display: block;
}

.containerleft .du_customerror {
    font-size: 15px;
}

.worker button {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.worker button:hover {
    transform: scale(1.05);
}

button#clearButton {
    color: #012F87;
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-left: 10px;
}

button#clearButton:not(.hidden) {
    display: flex;
}

button#clearButton img {
    margin-right: 10px;
    margin-left: 0;
}

.popupmodul {
    z-index: 9999;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(1 47 135 / 40%);
    z-index: 99;
}

.popupbox {
    z-index: 999;
    background: #fff;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    padding: 40px;
    max-height: 90vh;
    overflow: auto;
}

body.modal-open {
    overflow: hidden;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 14px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 32px;
}

.popupbox h2 {
    color: #000;
    font-size: 26px;
    margin-top: 0;
}

.form-group input.valid, .form-group select.valid {
    border-color: #76AE00;
}

.form-group input.invalid, .form-group select.invalid {
    border-color: #F44336;
}

input:focus-visible {
    outline: none;
}

.form-group.div_3 {
    flex: calc(33% - 20px);
}

.form-group.div_1 {
    flex: 100%;
}

.popcontent .form-container {
    padding: 0;
}

.div_2-3.form-group {
    flex: calc(66% - 10px);
}

#pop-guardarempresa .btn-secondary {
    margin-left: auto;
    margin-top: 10px;
}

/* Estilos para el tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 294px;
    background-color: #CCD5E7;
    color: #4C4C4C;
    text-align: left;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

/* Flecha del tooltip */
.tooltip .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Tooltip a la derecha del botón (por defecto) */
.tooltip .tooltiptext {
    top: 50%;
    left: 100%;
    margin-left: 10px;
    transform: translateY(-54%);
}

.tooltip .tooltiptext .tooltip-arrow {
    top: 50%;
    left: -5px;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-color: transparent #CCD5E7 transparent transparent;
}

/* Mostrar tooltip en hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.infoico {
    display: flex;
}

.infoico:hover {
    filter: brightness(0) saturate(100%) invert(14%) sepia(46%) saturate(4461%) hue-rotate(213deg) brightness(95%) contrast(107%);
}

#popnoregistro .popupbox,
#popregistro .popupbox {
    padding: 0;
}

.form-group.costo {flex: calc(10% - 20px);}

p.flabel {
    margin-top: 0;
    margin-bottom: 20px;
    color: #65676B;
}

.form-group input, .form-group select {
    font-size: 15px;
    height: 48px;
}

.form-group label {
    margin-bottom: 10px;
}

p.disclaimer {
    color: #014171;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0;
    padding-bottom: 32px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 32px;
}

.placeholdercalendar {
    padding-bottom: 32px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 32px;
    max-width: 100%;
    width: 100%;
}

p.datoinfo {
    font-weight: 600;
    margin: 0;
}

.form-group.placa {
    flex: calc(22% - 20px);
    margin-bottom: 0;
}

.form-group.celular input {
    max-width: 300px;
    margin-bottom: 0;
    font-family: 'Poppins';
}
.form-group.placa p.flabel {
    margin-bottom: 10px;
}

.form-group.direccion {
    flex: 100%;
    padding-top: 32px;
    border-top: 1px solid #eeeeee;
    margin-top: 32px;
}

.form-group.direccion p.flabel {
    margin-bottom: 10px;
}

.cita_infobox .botvertarifas {
    text-align: left;
}

.infodato {
    margin-bottom: 42px;
}

#step1 button.btn {
    width: 100%;
}

.product-selection p.flabel {
    margin-bottom: 10px;
}

.product-selection p.disclaimer {
    margin-top: 24px;
}

.du_divider {
    display: block;
    flex: 100%;
    height: 1px;
    margin-top: 32px;
    margin-bottom: 32px;
    background: #eeeeee;
}

.product-selection .form-group {
    margin-bottom: 0;
}

div#step2 button.btn:not(.back) {
    flex-grow: 1;
}

.product-selection .infodato {
    margin-bottom: 0;
    margin-top: 42px;
    width: 100%;
}

div#maincontent.intro {
    background: #fff;
}

.ui-datepicker .ui-datepicker-title {
    text-align: left;
    margin-left: 8px;
    color: #0072E9;
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev {
    left: unset;
    right: 54px;
}

.ui-widget-header {
    background: none;
    border: none;
}
.ui-icon {
    width: 20px;
    height: 20px;
}
.ui-datepicker table {
    width: 100%;
    font-size: .9em;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none;
    background: none;
    padding: .8em .5em;
    text-align: center;
    color: #014171;
}

.ui-datepicker th {
    font-size: .8em;
    color: #014171;
}

.ui-widget {
    font-family: "Exo", serif;
    font-optical-sizing: auto;
}

html .ui-widget-content .ui-state-disabled span, html .ui-widget-content .ui-state-disabled span {
    color: #ADADAD !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: #ffffff;
    background: #0072E9;
    border-radius: 12px;
}

.ui-state-hover, .ui-widget-content .ui-state-hover:not(.ui-state-active), .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    background: #E9F6FF;
    border-radius: 12px;
}

.placeholdercalendar {
    display: flex;
    flex-direction: row;
    column-gap: 2%;
    flex-wrap: wrap;
}

#datepicker-container {
    width: 68%;
    display: inline-block;
}

#time-selector {
    width: 30%;
    padding: 0 10px 10px;
    box-sizing: border-box;
    max-height: 362px;
    overflow: auto;
}

.ui-widget.ui-widget-content {
    width: 100%;
}

div#datepicker {
    box-sizing: border-box;
    display: block;
}
.time-button {
    display: block;
    margin: 5px 0;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: transparent;
    border: 1px solid #014171;
    color: #014171;
    border-radius: 10px;
}

.time-button:hover {
    background-color: #E9F6FF;
}

.time-button.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.selected {
    border-color: #0072E9 !important;
    background-color: #0072E9 !important;
    color: #fff !important;
}

.time-button {
    width: 100%;
}

#time-selector h3 {
    margin-top: 0;
    font-size: 15px;
    font-weight: 500;
}

p.d_calendartitle {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: "Exo", serif;
    font-optical-sizing: auto;
    font-size: 16px;
    color: #65676B;
    margin-top: 0;
}

.ui-datepicker {
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.ui-widget-header .ui-datepicker-prev .ui-icon {
    background-image: url(/src/img/arrow_left.svg);
    background-position: center;
    background-size: contain;
}

.ui-widget-header .ui-datepicker-next .ui-icon {
    background-image: url(/src/img/arrow_right.svg);
    background-position: center;
    background-size: contain;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    margin-left: -10px;
    margin-top: -10px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}

body.confirmacion-activa .cita_infobox p.infodato {
    display: none;
}

body.confirmacion-activa .cita_infobox .botvertarifas {
    display: none;
}

body.confirmacion-activa .form-builder {
    display: flex;
    align-items: stretch;
    gap: 0;
}

body.confirmacion-activa .cita_infobox {
    margin-bottom: 0;
    border-radius: 16px 0 0 16px;
    background-image: url(/src/img/fondogracias.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

body.confirmacion-activa .form-mainbox {
    border-radius: 0 16px 16px 0;
}

a.comollegar {
    color: #0072E9;
    font-weight: 500;
    text-decoration: none;
    margin-top: 2px;
    display: inline-block;
    transition: all 0.2s;
}

a.comollegar:hover {
    transform: scale(1.05);
}

.step-indicator .step img {
    filter: grayscale(1);
    opacity: 0.5;
}

.step-indicator .divider {
    content: "";
    height: 1px;
    width: 80px;
    background: #9e9e9e;
}

.step-indicator .step.active, .step-indicator .step.completed {
    color: #0072e9;
}

.step-indicator .step.active img, .step-indicator .step.completed img {
    filter: none;
    opacity: 1;
}

.step-indicator .step.completed + .divider {
    background: #0072e9;
}



































@media (max-width: 1024px) {
    .tooltip .tooltiptext {
        top: 0;
        left: unset;
        right: 0;
        margin-left: 0;
        transform: translate(-12%, -20%);
    }

    .tooltip .tooltiptext .tooltip-arrow {
        top: 35%;
        left: unset;
        right: -5px;
        margin-left: -5px;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #CCD5E7;
    }

    .buttonsbox {
        flex-wrap: wrap;
    }

    .tooltip {
        width: 40px;
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }

    button#uploadButton {
        width: calc(100% - 40px);
    }

    .buttonsbox .btn.btn-secondary {
        margin-right: 0;
    }

    .form-builder {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }

    .step-indicator .step {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
        padding: 8px;
    }

    .step-indicator {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cita_infobox {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-mainbox {
        width: 100%;
    }

    div#maincontent {
        padding-bottom: 100px;
        background-size: 95px;
        padding-top: 0;
    }

    .product-selection {
        display: flex;
        flex-direction: column;
    }

    .product {
        width: 100%;
        margin-bottom: 20px;
    }

    .product-info h3 {
        display: flex;
        align-items: flex-start;
    }

    .form-buttons {
        display: flex;
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .form-container {
        padding: 5px;
    }

    .step-indicator {
        padding: 5px;
    }

    .cita_infobox {
        padding: 5px;
    }

    .step.completed span:before {
        height: 30px;
        width: 30px;
    }

    img.mainlogo {
        width: 142px;
    }

    .logopefectivo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-secondary {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    div#manualEntry .form-group {
        width: 100%;
    }

    div#manualEntry {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .datos {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 6px;
    }

    .fieldsbox {
        display: flex;
        flex-direction: column;
    }

    .summary table {
        min-width: 538px;
    }

    .summary {
        overflow-x: auto;
    }

    .summary th.bodyth {
        font-size: 13px;
        min-width: 90px;
    }

    .summary thead img {
        max-width: 180px;
    }

    .form-container h2 {
        font-size: 24px;
    }

    img.demo {
        max-width: 100%;
    }

    button#clearButton {
        margin-top: 10px;
        justify-content: center;
        margin-left: 0;
    }

    div#maincontent.intro {
        display: flex;
        flex-direction: column;
    }

    .containerright {
        width: 100%;
        background: url(/src/img/fondomobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        align-items: flex-end;
    }

    

    img.mariposaintro {
        display: none;
    }

    img.fototrabajador {
        content: url("/src/img/trabajadormobile.png");
        max-width: 188px;
        margin-bottom: -41px;
    }

    body:before {
        display: none;
    }

    img.logointro {
        max-width: 204px;
    }

    .containerleft {
        width: 100%;
        padding: 32px 15px 15px;
        box-sizing: border-box;
    }

    .containerleft .form-container h2 {
        font-size: 38px;
    }

    .containerleft .form-container h2 span {
        font-size: 24px;
    }

    .containerleft button.btn.primary {
        width: 100%;
    }

    .cita_infobox {
        display: flex;
        flex-direction: column;
        padding: 22px;
        width: 56%;
    }
    
    .infodato {
        margin-bottom: 20px;
        max-width: 358px;
    }
    
    .cita_infobox .botvertarifas {
        margin-left: 5px;
    }
    
    .fieldsbox {
        flex-direction: row;
    }

    .step-indicator {
        width: 415px;
        max-width: 50%;
    }
    
    .step-indicator .divider {
        width: 50px;
    }
    
    .step-indicator .step img {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    img.mainlogo {
        width: 238px;
    }
    
    header .container {
        padding: 6px 15px;
    }

    body.confirmacion-activa .cita_infobox {
        width: 100%;
        border-radius: 16px 16px 0 0;
        height: 450px;
        background-position: left;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-direction: column;
    }
    
    body.confirmacion-activa .form-mainbox {
        border-radius: 0 0 16px 16px;
        padding: 25px;
    }
    

    
    .product-selection .infodato {
        padding-right: 42px;
    }

    body.confirmacion-activa .cita_infobox h2 {
        text-align: right;
        max-width: 452px;
    }
    
    body.confirmacion-activa .cita_infobox {
        padding: 38px;
    }
    
    body.confirmacion-activa div#maincontent > .container {
        max-width: 750px;
    }
    
    .containerright {
        background: url(/src/img/fondo-intro-mobile.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        height: 320px;
    }

}

@media (max-width: 767px) {

    .popupbox {
        padding: 30px;
        max-width: 90% !important;
    }

    .form-group.costo p.flabel {
        margin-bottom: 10px;
    }
    
    .popcontent .btn-secondary {
        margin-top: 10px;
    }

    #pop-guardarempresa h2 {
        font-size: 20px;
    }
    
    #pop-guardarempresa h2 span {
        font-size: 18px;
    }
    .cita_infobox {
        width: 100%;
    }
    
    header .container {
        display: flex;
        flex-direction: column;
        padding: 20px 15px 15px;
    }
    
    .step-indicator {
        padding-bottom: 0;
        width: 415px;
        max-width: 100%;
        padding-top: 0;
    }
    
    .step-indicator .step {
        padding-bottom: 0;
        padding-top: 0;
    }
    
    img.mainlogo {
        margin-bottom: 20px;
    }
    
    .form-mainbox {
        padding: 22px;
    }
    
    .fieldsbox {flex-direction: column;}
    
    .placeholdercalendar {
        flex-direction: column;
    }
    
    #datepicker-container {
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        padding: .9em 0.4em;
    }
    
    #time-selector {
        max-height: unset;
        overflow: unset;
        padding: 12px 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: calc(100% + 20px);
        margin-left: -10px;
    }
    
    .time-button {
        width: 48%;
        font-size: 16px;
    }
    
    .form-group.celular {
        margin-bottom: 20px;
    }
    
    .product-selection .form-group {
        margin-bottom: 20px;
    }
    
    .product-selection p.disclaimer {
        margin-top: 5px;
    }

    .step-indicator {
        width: 100%;
    }
    
    div#maincontent:not(.intro):before {
        max-width: 100%;
    }
    .product-selection p.disclaimer {
        width: 100%;
    }
    
    .product-selection .infodato {
        max-width: 100% !important;
        box-sizing: border-box;
        display: none;
    }
    
    div#maincontent {
        padding-bottom: 62px;
    }
    
    .cita_infobox {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    
    body.confirmacion-activa .cita_infobox h2 {
        text-align: left;
        max-width: unset;
    }
    
    body.confirmacion-activa .cita_infobox {
        justify-content: flex-start;
        height: 588px;
        background-position: center bottom;
        padding: 28px;
    }
    
    body.confirmacion-activa .cita_infobox p.infodato {
        display: block;
    }
    
    .du_divider {
        padding-bottom: 1px;
    }

    .intro .form-container {
        max-width: 100%;
        text-align: center;
    }
    
    #logotipo {margin-bottom: 28px;width: 248px;}
    
    .containerleft .form-container h2 {
        margin-left: auto;
        margin-right: auto;
        line-height: 1.1;
    }
    
    .containerleft .input-container {
        display: flex;
        justify-content: space-around;
        gap: 5px;
    }
    
    .containerleft .input-container input {width: 16.66%;max-width: 68px;margin-right: 0;max-height: 75px;}
    
    .form-group.custom-checkbox-group label {
        text-align: left;
    }
    
    .form-group.custom-checkbox-group {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 350px;
        box-sizing: border-box;
    }
    #popregistro button.primary {
        margin-top: 0;
    }
    
    #popregistro button.btn-secondary {
        margin-top: 28px;
        width: 100%;
    }
    #poptarifas .popupbox {
        padding: 20px;
    }
    
    #poptarifas th {
        font-size: 15px;
        line-height: 1.1;
    }
    
    #poptarifas .tab-button {
        font-size: 15px;
    }
    .product-selection .du_divider {
        margin-top: 12px;
    }
}