/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Public+Sans:wght@100;300;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap");

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

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

html {
    box-sizing: border-box;
    font-size: 62.5%
}

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

body {
    background-color: #052344;
    font-family: Roboto Condensed, sans-serif;
    font-size: 1.6rem;
    line-height: 1.8
}

p {
    color: #fff;
    font-family: Public Sans;
    font-size: 2rem
}

.contenedor {
    margin: 0 auto;
    max-width: 120rem;
    width: 95%
}

a {
    text-decoration: none
}

img,
picture {
    display: block;
    width: 100%
}

h1,
h2,
h3 {
    color: #fff;
    font-family: Roboto Condensed, sans-serif;
    font-weight: 300;
    margin: 2.5rem 0;
    text-align: center
}

h1 {
    font-size: 3.8rem
}

h2 {
    font-size: 3.4rem
}

h3 {
    font-size: 3rem
}

h4 {
    font-size: 2.6rem
}

.splide__container {
    box-sizing: border-box;
    position: relative
}

.splide__list {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__progress__bar {
    width: 0
}

.splide {
    position: relative;
    visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
    visibility: visible
}

.splide__slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative
}

.splide__slide img {
    vertical-align: bottom
}

.splide__spinner {
    -webkit-animation: splide-loading 1s linear infinite;
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
    display: none
}

.splide__toggle.is-active .splide__toggle__pause {
    display: inline
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

@-webkit-keyframes splide-loading {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
    margin: 0 !important;
    opacity: 0;
    z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
    opacity: 1;
    z-index: 1
}

.splide--rtl {
    direction: rtl
}

.splide__track--ttb>.splide__list {
    display: block
}

.splide__arrow {
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 2em;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

.splide__arrow svg {
    fill: #000;
    height: 1.2em;
    width: 1.2em
}

.splide__arrow:hover:not(:disabled) {
    opacity: .9
}

.splide__arrow:disabled {
    opacity: .3
}

.splide__arrow:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__arrow--prev {
    left: 1em
}

.splide__arrow--prev svg {
    transform: scaleX(-1)
}

.splide__arrow--next {
    right: 1em
}

.splide.is-focus-in .splide__arrow:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__pagination {
    bottom: .5em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

.splide__pagination__page {
    background: #ccc;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 8px
}

.splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1.4);
    z-index: 1
}

.splide__pagination__page:hover {
    cursor: pointer;
    opacity: .9
}

.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__progress__bar {
    background: #ccc;
    height: 3px
}

.splide__slide {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.splide__slide:focus {
    outline: 0
}

@supports (outline-offset:-3px) {
    .splide__slide:focus-visible {
        outline: 3px solid #0bf;
        outline-offset: -3px
    }
}

@media screen and (-ms-high-contrast:none) {
    .splide__slide:focus-visible {
        border: 3px solid #0bf
    }
}

@supports (outline-offset:-3px) {
    .splide.is-focus-in .splide__slide:focus {
        outline: 3px solid #0bf;
        outline-offset: -3px
    }
}

@media screen and (-ms-high-contrast:none) {
    .splide.is-focus-in .splide__slide:focus {
        border: 3px solid #0bf
    }

    .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
        border-color: #0bf
    }
}

.splide__toggle {
    cursor: pointer
}

.splide__toggle:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide__track--nav>.splide__list>.splide__slide {
    border: 3px solid transparent;
    cursor: pointer
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: 3px solid #000
}

.splide__arrows--rtl .splide__arrow--prev {
    left: auto;
    right: 1em
}

.splide__arrows--rtl .splide__arrow--prev svg {
    transform: scaleX(1)
}

.splide__arrows--rtl .splide__arrow--next {
    left: 1em;
    right: auto
}

.splide__arrows--rtl .splide__arrow--next svg {
    transform: scaleX(-1)
}

.splide__arrows--ttb .splide__arrow {
    left: 50%;
    transform: translate(-50%)
}

.splide__arrows--ttb .splide__arrow--prev {
    top: 1em
}

.splide__arrows--ttb .splide__arrow--prev svg {
    transform: rotate(-90deg)
}

.splide__arrows--ttb .splide__arrow--next {
    bottom: 1em;
    top: auto
}

.splide__arrows--ttb .splide__arrow--next svg {
    transform: rotate(90deg)
}

.splide__pagination--ttb {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: auto;
    padding: 1em 0;
    right: .5em;
    top: 0
}

.inscribete {
    box-sizing: border-box;
    position: relative
}

.inscribete .cotenedor-in {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.inscribete .cotenedor-in .box {
    background-color: rgba(156, 0, 0, .8);
    border-radius: 1rem;
    height: 90%;
    overflow: hidden;
    position: relative;
    width: 70%
}

.inscribete .cotenedor-in .box:after,
.inscribete .cotenedor-in .box:before {
    -webkit-animation: animate 6s linear infinite;
    animation: animate 6s linear infinite;
    background: linear-gradient(0deg, transparent, #fff, #fff);
    content: "";
    height: 100%;
    left: -50%;
    position: absolute;
    top: -50%;
    transform-origin: bottom right;
    width: 100%
}

.inscribete .cotenedor-in .box:after {
    -webkit-animation-delay: -3s;
    animation-delay: -3s
}

.form {
    background: #9c0000;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    inset: .2rem;
    position: absolute;
    z-index: 2
}

.form h2 {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .1rem;
    margin: 0;
    text-transform: uppercase
}

.form .inputbox {
    margin: 1rem 1rem 0;
    position: relative;
    width: 90%
}

.form .inputbox input {
    background: transparent;
    border: none;
    color: #9c0000;
    font-size: 1.2rem;
    letter-spacing: .05rem;
    outline: none;
    position: relative;
    width: 100%;
    z-index: 2
}

.form .inputbox input:focus~span,
.form .inputbox input:valid~span {
    color: #fff;
    font-size: 1rem;
    transform: translateY(-1.3rem)
}

.form .inputbox input:focus~i,
.form .inputbox input:valid~i {
    height: 2.5rem;
    z-index: 1
}

.form .inputbox span {
    color: hsla(0, 0%, 100%, .5);
    font-size: 1.2rem;
    letter-spacing: .05rem;
    top: 0
}

.form .inputbox i,
.form .inputbox span {
    left: 0;
    pointer-events: none;
    position: absolute;
    transition: .5s
}

.form .inputbox i {
    background: #fff;
    border-radius: .4rem;
    bottom: 0;
    height: .2rem;
    width: 100%
}

.form input[type=submit] {
    background-color: hsla(0, 0%, 100%, .8);
    border: none;
    border-radius: .4rem;
    color: #9c0000;
    cursor: pointer;
    display: inline;
    font-weight: 600;
    margin: 1rem 1rem 0;
    outline: none;
    padding: .5rem 1.5rem;
    width: 90%
}

@-webkit-keyframes animate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes animate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@media (min-width:768px) {
    .inscribete .cotenedor-in .box {
        height: 75%;
        width: 40%
    }

    .form {
        padding: .5rem
    }

    .form h2 {
        font-size: 3rem;
        margin: 1rem 0
    }

    .form .inputbox {
        margin-top: 2rem
    }

    .form .inputbox input {
        font-size: 1.4rem
    }

    .form .inputbox input:focus~span,
    .form .inputbox input:valid~span {
        font-size: 1.2rem;
        transform: translateX(-10px) translateY(-2rem)
    }

    .form .inputbox input:focus~i,
    .form .inputbox input:valid~i {
        height: 3rem
    }

    .form .inputbox span {
        font-size: 1.8rem
    }

    .form input[type=submit] {
        font-size: 2.5rem;
        padding: 1.3rem
    }
}

@media (min-width:1240px) {
    .inscribete .cotenedor-in .box {
        height: 70%;
        width: 40%
    }

    .form {
        padding: 2rem
    }

    .form h2 {
        font-size: 3.4rem;
        margin: 2.5rem 0
    }

    .form .inputbox {
        margin-top: 3.5rem
    }

    .form .inputbox input {
        font-size: 2.5rem;
        padding: 2rem 1rem 1rem
    }

    .form .inputbox input:focus~span,
    .form .inputbox input:valid~span {
        font-size: 1.8rem;
        transform: translateX(-10px) translateY(-4.5rem)
    }

    .form .inputbox input:focus~i,
    .form .inputbox input:valid~i {
        height: 5rem
    }

    .form .inputbox span {
        font-size: 2.5rem;
        padding: 2rem 1rem 1rem
    }

    .form input[type=submit] {
        font-size: 2.5rem;
        padding: 1.3rem
    }
}

.buscador,
.factura {
    background: #052344
}

.buscador .container-form,
.factura .container-form {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    position: relative;
    width: 100%
}

.buscador .container-form .content,
.factura .container-form .content {
    background: hsla(0, 0%, 100%, .8);
    border-radius: 2rem;
    overflow: hidden;
    padding: .5rem;
    position: relative;
    width: 90%
}

@media (min-width:768px) {

    .buscador .container-form .content,
    .factura .container-form .content {
        width: 60%
    }
}

@media (min-width:1024px) {

    .buscador .container-form .content,
    .factura .container-form .content {
        width: 40%
    }
}

.buscador .container-form .content:after,
.buscador .container-form .content:before,
.factura .container-form .content:after,
.factura .container-form .content:before {
    -webkit-animation: animate 6s linear infinite;
    animation: animate 6s linear infinite;
    background: linear-gradient(0deg, transparent, #1b5db5, #1b5db5, #1b5db5, #1b5db5);
    content: "";
    height: 100%;
    left: -50%;
    position: absolute;
    top: -50%;
    transform-origin: bottom right;
    width: 100%;
    z-index: 1
}

.buscador .container-form .content:after,
.factura .container-form .content:after {
    -webkit-animation-delay: -3s;
    animation-delay: -3s
}

.buscador .container-form .content .formularioL,
.factura .container-form .content .formularioL {
    background: #fff;
    border-radius: 2rem;
    padding: 2rem;
    position: relative;
    z-index: 2
}

.buscador .container-form .content .form-login .inputBox,
.factura .container-form .content .form-login .inputBox {
    margin-top: 3.5rem;
    position: relative;
    width: 95%
}

.buscador .container-form .content .form-login .inputBox input,
.factura .container-form .content .form-login .inputBox input {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: .05rem;
    outline: none;
    padding: 2rem 1rem 1rem;
    position: relative;
    transition: .5s;
    width: 100%;
    z-index: 10
}

.buscador .container-form .content .form-login .inputBox input.error,
.factura .container-form .content .form-login .inputBox input.error {
    background: rgba(255, 0, 0, .5);
    border: .1rem solid red;
    transition: .2s
}

.buscador .container-form .content .form-login .inputBox input:focus~span,
.buscador .container-form .content .form-login .inputBox input:valid~span,
.factura .container-form .content .form-login .inputBox input:focus~span,
.factura .container-form .content .form-login .inputBox input:valid~span {
    color: #1b5db5;
    font-size: 1.2rem;
    transform: translateY(-3.4rem)
}

.buscador .container-form .content .form-login .inputBox input:focus~i,
.buscador .container-form .content .form-login .inputBox input:valid~i,
.factura .container-form .content .form-login .inputBox input:focus~i,
.factura .container-form .content .form-login .inputBox input:valid~i {
    height: 80%
}

.buscador .container-form .content .form-login .inputBox span,
.factura .container-form .content .form-login .inputBox span {
    color: #8f8f8f;
    font-size: 1.4rem;
    left: 0;
    letter-spacing: .05rem;
    padding: 2rem 0 1rem;
    pointer-events: none;
    position: absolute;
    transition: .5s
}

.buscador .container-form .content .form-login .inputBox i,
.factura .container-form .content .form-login .inputBox i {
    background-color: #1b5db5;
    border-radius: .4rem;
    bottom: 0;
    height: .2rem;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transition: .5s;
    width: 100%
}

.buscador .container-form .content .form-login .tSiguinte,
.buscador .container-form .content .form-login input[type=submit],
.factura .container-form .content .form-login .tSiguinte,
.factura .container-form .content .form-login input[type=submit] {
    background: #1b5db5;
    border: none;
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 1rem;
    outline: none;
    padding: .9rem 2.5rem;
    width: 90%
}

.buscador .container-form .content .form-login .tSiguinte,
.buscador .container-form .content .form-login input[type=submit]:active,
.factura .container-form .content .form-login .tSiguinte,
.factura .container-form .content .form-login input[type=submit]:active {
    opacity: .8
}

.buscador .container-form .content .logo,
.factura .container-form .content .logo {
    display: flex;
    justify-content: center;
    width: 100%
}

.buscador .container-form .content .logo img,
.factura .container-form .content .logo img {
    width: 30rem
}

.buscador .container-form .content .buscador,
.buscador .container-form .content .formularioL,
.factura .container-form .content .buscador,
.factura .container-form .content .formularioL {
    width: 100%
}

/* ====== CORRECCIÓN: Eliminamos "display: contents;" y usamos flex + column ====== */
.buscador .container-form .content .buscador .form-buscador,
.buscador .container-form .content .buscador .form-login,
.buscador .container-form .content .formularioL .form-buscador,
.buscador .container-form .content .formularioL .form-login,
.contenedor-facturas,
.factura .container-form .content .buscador .form-buscador,
.factura .container-form .content .buscador .form-login,
.factura .container-form .content .formularioL .form-buscador,
.factura .container-form .content .formularioL .form-login {
    align-items: center;
    display: flex;          /* En vez de 'contents' */
    flex-direction: column; /* Para mantener la estructura en columnas */
}


.contenedor-facturas {
    justify-content: center
}

.consola {
    /* Quitamos display: grid o contents, y grid-template-rows, etc. */
    background: hsla(0, 0%, 100%, .5);
    border-radius: 2rem;
    padding: 1rem 0;
    width: 95%;
}

@media (min-width:768px) {
    .consola h2 {
        font-size: 4.5rem
    }
}

@media (min-width:1024px) {
    .consola h2 {
        font-size: 5rem
    }
}

.consola p {
    font-size: 2.5rem;
    font-weight: 700
}

.consola p.mensaje-preparacion {
    color: #1b5db5
}

.consola p.mensaje-Error {
    color: #e52054
}

.consola p.mensaje-Exito {
    color: #00bb2d
}

@media (min-width:768px) {
    .consola p {
        font-size: 3rem
    }
}

@media (min-width:1024px) {
    .consola p {
        font-size: 3.5rem
    }
}
.facturas-content,
.notas-content {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    padding: 1rem;
}
@media (min-width:768px) {
    .facturas-content,
    .notas-content {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width:1024px) {
    .facturas-content,
    .notas-content {
        grid-template-columns: repeat(4, 1fr);
    }
}
.facturas-content .factura,
.facturas-content .nota,
.notas-content .factura,
.notas-content .nota {
    background: rgba(27, 93, 181, .7);
    border-radius: 2rem;
    margin-top: 1rem;
    width: 90%;
}
.facturas-content .factura a,
.facturas-content .nota a,
.notas-content .factura a,
.notas-content .nota a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}
.facturas-content .factura a .img,
.facturas-content .nota a .img,
.notas-content .factura a .img,
.notas-content .nota a .img {
    width: 30%;
}

.buscador-facturas,
.buscador-notas {
    display: flex;
    justify-content: center;
    width: 100%;
}
@media (min-width:768px) {
    .buscador-facturas,
    .buscador-notas {
        justify-content: flex-end;
    }
}
.form-buscador {
    display: flex;
    justify-content: center;
    width: 100%;
}
@media (min-width:768px) {
    .form-buscador {
        margin-right: 3.8rem;
        width: 45%;
    }
}
@media (min-width:1024px) {
    .form-buscador {
        margin-right: 4rem;
        width: 31.5%;
    }
}
.form-buscador .inputBox {
    margin-top: 3.5rem;
    position: relative;
    width: 95%;
}
.form-buscador .inputBox input {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #1b5db5;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .05rem;
    outline: none;
    padding: 2rem 1rem 1rem;
    position: relative;
    transition: .5s;
    width: 100%;
    z-index: 10;
}
@media (min-width:768px) {
    .form-buscador .inputBox input {
        font-size: 1.8rem;
    }
}
.form-buscador .inputBox input:focus~span,
.form-buscador .inputBox input:valid~span {
    color: #fff;
    font-size: 1.2rem;
    transform: translateY(-3.4rem);
}
.form-buscador .inputBox input:focus~i,
.form-buscador .inputBox input:valid~i {
    height: 80%;
}
.form-buscador .inputBox span {
    color: #dfdfdf;
    font-size: 1.4rem;
    left: 0;
    letter-spacing: .05rem;
    padding: 2rem 0 1rem;
    pointer-events: none;
    position: absolute;
    transition: .5s;
}
@media (min-width:768px) {
    .form-buscador .inputBox span {
        font-size: 1.8rem;
    }
}
.form-buscador .inputBox i {
    background-color: #fff;
    border-radius: .4rem;
    bottom: 0;
    height: .2rem;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transition: .5s;
    width: 100%;
}
.form-buscador .tSiguinte,
.form-buscador input[type=submit] {
    background: #1b5db5;
    border: none;
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 1rem;
    outline: none;
    padding: .9rem 2.5rem;
}
.form-buscador .tSiguinte,
.form-buscador input[type=submit]:active {
    opacity: .8;
}


.total-c p,
.total-f p {
    font-size: 2rem;
    margin-left: 1rem
}

@media (min-width:768px) {

    .total-c p,
    .total-f p {
        font-size: 3rem;
        margin-left: 2rem
    }
}
.paginacion {
    display: flex;
    padding-top: 20px;
    align-items: center;
    justify-content: flex-start; /* Alineación inicial */
    flex-wrap: nowrap; /* Evita que los botones salten de línea */
    padding: 1.5rem; /* Espaciado interno del contenedor principal */
    gap: 2rem; /* Espaciado entre botones */
    max-width: 100%; /* Ancho completo del contenedor */
    margin: 0 auto; /* Centra el contenedor */
    overflow-x: auto; /* Habilita el scroll horizontal */
    background-color: transparent; /* Fondo transparente */
    border-radius: 1rem; /* Bordes redondeados */
    scrollbar-width: thin; /* Estiliza el scroll */
    scrollbar-color: #1b5db5 transparent; /* Color del scroll */
}

/* Estilo para el scroll en navegadores WebKit */
.paginacion::-webkit-scrollbar {
    height: 10px; /* Altura del scroll horizontal */
}

.paginacion::-webkit-scrollbar-thumb {
    background-color: #1b5db5; /* Color del "thumb" del scroll */
    border-radius: 10px; /* Bordes redondeados */
}

.paginacion::-webkit-scrollbar-track {
    background-color: transparent; /* Fondo del track transparente */
}

.paginacion .pagina-cr a,
.paginacion .pagina a {
    background-color: hsla(0, 0%, 100%, 0.2); /* Fondo translúcido */
    border-radius: 4rem; /* Bordes redondeados */
    color: rgba(27, 93, 181, 1); /* Color del texto */
    margin: 0.5rem; /* Espaciado entre botones */
    padding: 1rem 1.5rem; /* Tamaño del botón (más grande) */
    font-size: 2.5rem; /* Tamaño del texto (más grande) */
    font-weight: bold; /* Texto en negrita */
    text-align: center;
    align-items: center;
    white-space: nowrap; /* Evita cortes de texto */
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.paginacion .pagina-cr a.select,
.paginacion .pagina-cr a:hover,
.paginacion .pagina a.select,
.paginacion .pagina a:hover {
    background-color: #1b5db5; /* Fondo más llamativo */
    color: #fff; /* Texto blanco */
    transform: scale(1.15); /* Crecimiento moderado al hacer hover */
}
.container-info {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    padding: 2rem;
}
.container-info .container-princi {
    background: hsla(0, 0%, 100%, .5);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 1rem;
    width: 90%;
}
@media (min-width:768px) {
    .container-info .container-princi {
        grid-template-columns: repeat(2, 1fr);
    }
    .container-info .container-princi .largo {
        grid-column: 1/3;
        text-align: center;
    }
}
@media (min-width:1024px) {
    .container-info .container-princi {
        grid-template-columns: repeat(3, 1fr);
    }
    .container-info .container-princi .largo {
        grid-column: 3/4;
        text-align: justify;
    }
}
.container-info .container-princi h1 {
    font-weight: bolder;
    grid-column: 1/1;
    letter-spacing: .1rem;
}
@media (min-width:768px) {
    .container-info .container-princi h1 {
        font-size: 4.8rem;
        grid-column: 1/3;
    }
}
@media (min-width:1024px) {
    .container-info .container-princi h1 {
        font-size: 5.8rem;
        grid-column: 1/4;
    }
}
.container-info .container-princi .foto-btnD {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container-info .container-princi .foto-btnD .imagen {
    display: flex;
    justify-content: center;
    width: 100%;
}
.container-info .container-princi .foto-btnD .imagen img {
    width: 40%;
}
@media (min-width:768px) {
    .container-info .container-princi .foto-btnD .imagen img {
        width: 60%;
    }
}
.container-info .container-princi .foto-btnD .boton-descarga {
    margin-top: 2rem;
}
.container-info .container-princi .foto-btnD .boton-descarga a {
    background-color: #00bb2d;
    border-radius: 1rem;
    display: flex;
    padding: .5rem 1rem;
}
.container-info .container-princi .foto-btnD .boton-descarga a img {
    width: 3rem;
}
@media (min-width:768px) {
    .container-info .container-princi .foto-btnD .boton-descarga {
        display: flex;
        justify-content: center;
        width: 90%;
    }
    .container-info .container-princi .foto-btnD .boton-descarga a {
        align-items: center;
        justify-content: center;
        width: 80%;
    }
    .container-info .container-princi .foto-btnD .boton-descarga a img {
        width: 4rem;
    }
    .container-info .container-princi .foto-btnD .boton-descarga a p {
        font-size: 2.5rem;
    }
}
.info {
    margin-top: 2rem
}

.info p {
    align-items: center;
    font-size: 3.5vw;
    font-weight: bolder
}

@media (min-width:768px) {
    .info p {
        font-size: 2.3vw
    }
}

@media (min-width:1024px) {
    .info p {
        font-size: 2vw
    }
}

.info p span {
    color: #1b5db5;
    font-weight: 700;
    margin-left: 2rem
}

.info p span.Aprobada {
    color: #00bb2d
}

.info p span.Rechazada {
    color: #e52054
}

.blanco {
    background: #fff !important;
    padding: 2rem
}

.blanco p {
    font-size: 16px
}

.blanco p,
.blanco p span {
    color: #000
}

.blanco .cabecera {
    padding: 20px;
    width: 100%
}

.blanco .cabecera .col1 {
    width: 50%
}

.blanco .cabecera .col1 img {
    width: 100%
}

.blanco .cabecera .col2 {
    text-align: center
}

.blanco .cabecera .col2 p {
    font-weight: 700;
    line-height: 4.5rem
}

.blanco .finfactura,
.blanco .infogen {
    border: .01rem solid #000;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 2rem
}

.blanco .finfactura h2,
.blanco .infogen h2 {
    color: #000
}

.blanco .finfactura .col1,
.blanco .finfactura .col2,
.blanco .infogen .col1,
.blanco .infogen .col2 {
    align-items: center;
    display: grid;
    justify-items: center;
    text-align: justify
}

.blanco .finfactura .col1,
.blanco .infogen .col1 {
    border-right: .01rem solid #000
}

.blanco .finfactura .col1 h2,
.blanco .infogen .col1 h2 {
    text-align: justify;
    text-decoration: underline;
    width: 80%
}

.blanco .finfactura .col1 p,
.blanco .infogen .col1 p {
    width: 80%
}

.blanco .finfactura .col2,
.blanco .infogen .col2 {
    grid-template-columns: repeat(2, 1fr)
}

.blanco .finfactura .col2 .content1,
.blanco .finfactura .col2 .content2,
.blanco .infogen .col2 .content1,
.blanco .infogen .col2 .content2 {
    width: 100%
}

.blanco .finfactura .col2 p,
.blanco .infogen .col2 p {
    border-bottom: .01rem solid #000;
    text-align: center
}

.blanco .finfactura .col2 h2,
.blanco .infogen .col2 h2 {
    border-bottom: .01rem solid #000;
    margin: 0;
    width: 100%
}

.blanco .finfactura .col2 .content1 p,
.blanco .infogen .col2 .content1 p {
    border-right: .01rem solid #000
}

.blanco .finfactura .col2 .content1 .ultimo,
.blanco .infogen .col2 .content1 .ultimo {
    border-right: none;
    text-align: right
}

.blanco .finfactura .col2 .content2 .ultimo,
.blanco .infogen .col2 .content2 .ultimo {
    text-align: left
}

.blanco .finfactura .col2 .ultimo,
.blanco .finfactura .col2 .ultimoN,
.blanco .infogen .col2 .ultimo,
.blanco .infogen .col2 .ultimoN {
    border-bottom: none
}

.blanco .productos {
    margin-top: 1rem;
    padding: 2rem
}

.blanco .productos table {
    border: .01rem solid #000;
    width: 100%
}

.blanco .productos table thead {
    background: #1b5db5;
    color: #fff
}

.blanco .productos table tbody {
    text-align: center
}

.blanco .productos table tbody td {
    border-bottom: .01rem solid #000;
    border-right: .01rem solid #000
}

.blanco .finfactura h3,
.blanco .finfactura p {
    text-align: justify;
    width: 90% !important
}

.blanco .finfactura h3 {
    color: #000;
    font-size: 2rem;
    margin: 0
}

.blanco .finfactura .col1 {
    border-bottom: .01rem solid #000
}

.blanco .finfactura .col2 .content1 p,
.blanco .finfactura .col2 .content2 p {
    width: 100% !important
}

.blanco .finfactura .col2 .subtotal {
    color: #d35351;
    font-weight: 700
}

.blanco .finfactura .col2 .neto {
    color: #1b5db5;
    font-weight: 700
}

.blanco .finfactura .col3 {
    grid-column: 1/3
}

.blanco .finfactura .col3 p {
    text-align: center;
    width: 100% !important
}

.blanco .piefactura {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
    padding: 0 2rem
}

.blanco .piefactura .col1,
.blanco .piefactura .col2 {
    border: .01rem solid #000;
    padding: 1rem
}

.blanco .piefactura .firma {
    height: 10rem
}

.factura {
    position: relative
}

.factura .cargando {
    align-items: center;
    background-color: hsla(0, 0%, 100%, .8);
    display: none;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.factura .cargando .imagen,
.factura .cargando .texto {
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.factura .cargando .imagen img,
.factura .cargando .texto img {
    width: 40%
}

.factura .cargando .imagen p,
.factura .cargando .texto p {
    color: #1b5db5;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    width: 40%
}

@media (min-width:768px) {

    .factura .cargando .imagen p,
    .factura .cargando .texto p {
        font-size: 3rem
    }
}

.factura .cargando .imagen {
    align-items: end
}

.visible {
    display: flex !important;
    opacity: 1 !important
}

.containerLogOut {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 1rem;
    width: 95%
}

.containerLogOut .boton {
    margin-right: 1rem;
    margin-top: 1rem
}

.containerLogOut .boton a {
    align-items: center;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .1), #fff);
    border: .2rem solid #fff;
    border-radius: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    justify-content: center;
    padding: 1rem;
    transition: all .5s ease-in
}

.containerLogOut .boton a:hover {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .1), #fff);
    color: #1b5db5;
    transition: all .5s ease-out
}

@media (min-width:768px) {
    .containerLogOut .boton a {
        font-size: 2rem
    }
}

.containerLogOut .boton a img {
    width: 3.5rem
}

@media (min-width:768px) {
    .containerLogOut .boton a img {
        width: 6.5rem
    }
}

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

@media (min-width:1024px) {
    .menu {
        flex-direction: row
    }
}

.menu .logo {
    align-items: center;
    background-color: #fff;
    display: flex;
    justify-content: center;
    width: 100%
}

@media (min-width:1024px) {
    .menu .logo {
        height: 100vh
    }
}

.menu .logo .imagen {
    width: 50%
}

.menu .funcional {
    width: 100%
}

.menu .funcional h1 {
    font-size: 2rem
}

@media (min-width:768px) {
    .menu .funcional h1 {
        font-size: 3.5rem
    }
}

.menu .funcional .panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.menu .funcional .panel .menu {
    width: 95%
}

.menu .funcional .panel .menu select {
    border-radius: 1rem;
    color: #1b5db5;
    font-size: 1.2rem;
    font-weight: 700;
    padding: .5rem;
    text-align: center
}

@media (min-width:768px) {
    .menu .funcional .panel .menu select {
        font-size: 2rem;
        width: 100%
    }
}

.botones {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    width: 95%
}

.botones .boton {
    background-color: #fff;
    border-radius: 1rem;
    margin-top: 2rem
}

.botones .boton a {
    align-items: center;
    color: #1b5db5;
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    font-weight: 700;
    justify-content: center;
    padding: .5rem
}

.botones .boton a img {
    width: 5rem
}

.cabecera {
    background: #052344;
    padding: 1rem
}

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

.cabecera tr td {
    width: 100%
}

.cabecera tr td p {
    font-size: 1.2rem
}

.cabecera tr td p span {
    font-weight: 700
}

@media (min-width:768px) {
    .cabecera tr td p {
        font-size: 1.4rem
    }
}

@media (min-width:1024px) {
    .cabecera tr td p {
        font-size: 1.6rem
    }

    .cabecera tr {
        flex-direction: row
    }
}

.cabecera tr .c1 img {
    width: 80%
}

h2 {
    font-size: 2.5rem
}

@media (min-width:1024px) {
    h2 {
        font-size: 4rem
    }
}

h3 {
    font-size: 2rem;
    text-transform: uppercase
}

@media (min-width:1024px) {
    h3 {
        font-size: 3rem
    }
}

span {
    font-weight: 700;
    text-transform: uppercase
}

.codigo {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 95%
}

@media (min-width:768px) {
    .codigo {
        justify-content: flex-end
    }
}

.inputBox {
    margin-top: 3.5rem;
    position: relative;
    width: 95%
}

@media (min-width:768px) {
    .inputBox {
        margin-right: 1rem;
        width: 50%;
        width: 25%
    }
}

.inputBox input {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #052344;
    font-size: 1.6rem;
    letter-spacing: .05rem;
    outline: none;
    padding: 2rem 1rem 1rem;
    position: relative;
    transition: .5s;
    width: 100%;
    z-index: 10
}

.inputBox input:focus~span,
.inputBox input:valid~span {
    color: #fff;
    font-size: 1.2rem;
    transform: translateY(-3.4rem)
}

.inputBox input:focus~i,
.inputBox input:valid~i {
    height: 80%
}

.inputBox span {
    color: #8f8f8f;
    font-size: 1.4rem;
    letter-spacing: .05rem;
    padding: 2rem 0 1rem
}

.inputBox i,
.inputBox span {
    left: 0;
    pointer-events: none;
    position: absolute;
    transition: .5s
}

.inputBox i {
    background-color: #fff;
    border-radius: .4rem;
    bottom: 0;
    height: .2rem;
    overflow: hidden;
    width: 100%
}

.inputBox i.error {
    background: rgba(255, 0, 0, .7);
    border: .1rem solid red;
    transition: .2s
}

.aspectos-tecnicos,
.cuadro-acessorios,
.tabla-aspecto,
.tablaEntre {
    padding: 1rem;
    width: 100%
}

.aspectos-tecnicos td,
.aspectos-tecnicos th,
.cuadro-acessorios td,
.cuadro-acessorios th,
.tabla-aspecto td,
.tabla-aspecto th,
.tablaEntre td,
.tablaEntre th {
    border: .1rem solid #fff
}

.aspectos-tecnicos td p,
.aspectos-tecnicos th p,
.cuadro-acessorios td p,
.cuadro-acessorios th p,
.tabla-aspecto td p,
.tabla-aspecto th p,
.tablaEntre td p,
.tablaEntre th p {
    text-align: center
}

.aspectos-tecnicos td .inputBox,
.aspectos-tecnicos th .inputBox,
.cuadro-acessorios td .inputBox,
.cuadro-acessorios th .inputBox,
.tabla-aspecto td .inputBox,
.tabla-aspecto th .inputBox,
.tablaEntre td .inputBox,
.tablaEntre th .inputBox {
    height: 100%;
    margin: 0;
    width: 100%
}

.aspectos-tecnicos td .inputBox input,
.aspectos-tecnicos th .inputBox input,
.cuadro-acessorios td .inputBox input,
.cuadro-acessorios th .inputBox input,
.tabla-aspecto td .inputBox input,
.tabla-aspecto th .inputBox input,
.tablaEntre td .inputBox input,
.tablaEntre th .inputBox input {
    text-align: center
}

.aspectos-tecnicos td .inputBox input.error,
.aspectos-tecnicos th .inputBox input.error,
.cuadro-acessorios td .inputBox input.error,
.cuadro-acessorios th .inputBox input.error,
.tabla-aspecto td .inputBox input.error,
.tabla-aspecto th .inputBox input.error,
.tablaEntre td .inputBox input.error,
.tablaEntre th .inputBox input.error {
    background: rgba(255, 0, 0, .7);
    border: .1rem solid red;
    transition: .2s
}

.aspectos-tecnicos td .inputBox i,
.aspectos-tecnicos th .inputBox i,
.cuadro-acessorios td .inputBox i,
.cuadro-acessorios th .inputBox i,
.tabla-aspecto td .inputBox i,
.tabla-aspecto th .inputBox i,
.tablaEntre td .inputBox i,
.tablaEntre th .inputBox i {
    border-radius: 0;
    height: 100%;
    width: 100%
}

.aspectos-tecnicos select,
.cuadro-acessorios select,
.tabla-aspecto select {
    background-color: #fff;
    border: none;
    color: #052344;
    height: 100%;
    padding: 1rem;
    text-align: center;
    width: 100%
}

.aspectos-tecnicos select.error,
.cuadro-acessorios select.error,
.tabla-aspecto select.error {
    background: rgba(255, 0, 0, .7);
    border: .1rem solid red;
    transition: .2s
}

.aspectos-tecnicos .boxin,
.cuadro-acessorios .boxin,
.tabla-aspecto .boxin {
    height: 3rem;
    margin: 1rem 0;
    width: 100%
}

.contentTintaEstruct {
    padding: 1rem;
    width: 100%
}

.contentTintaEstruct td table {
    width: 100%
}

.contentTintaEstruct td table td,
.contentTintaEstruct td table th {
    border: .1rem solid #fff
}

.contentTintaEstruct td table td p,
.contentTintaEstruct td table th p {
    text-align: center
}

.contentTintaEstruct td table td input,
.contentTintaEstruct td table td select,
.contentTintaEstruct td table th input,
.contentTintaEstruct td table th select {
    color: #052344;
    height: 100%;
    padding: .5rem;
    text-align: center;
    width: 100%
}

.contentTintaEstruct td table td input.error,
.contentTintaEstruct td table td select.error,
.contentTintaEstruct td table th input.error,
.contentTintaEstruct td table th select.error {
    background: rgba(255, 0, 0, .7);
    border: .1rem solid red;
    transition: .2s
}

.laminaDiv {
    display: contents
}

.generar {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: 1rem;
    width: 100%
}

.generar .btn-generar {
    background-color: #fff;
    border: none;
    border-radius: 1rem;
    color: #052344;
    cursor: pointer;
    font-weight: 700;
    padding: 1rem;
    text-align: center;
    transition: all .5s ease-in;
    width: 100%
}

@media (min-width:1024px) {
    .generar .btn-generar {
        font-size: 2rem;
        padding: 1.5rem;
        width: 50%
    }
}

.generar .btn-generar:hover {
    background-color: #052344;
    border: .1rem solid #fff;
    color: #fff;
    transition: all .5s ease-in
}

.checks {
    display: flex;
    justify-content: flex-end;
    width: 95%
}

.checks .tipoArte {
    background: #052344;
    border: none;
    border-bottom: .1rem solid #fff;
    color: #fff;
    font-size: 1.8rem;
    padding: .5rem 1rem;
    text-align: center;
    width: 25%
}

.inputcode i {
    height: 80%
}

.inputcode span {
    transform: translateY(-3.4rem)
}

/*# sourceMappingURL=app.css.map */