main {
    margin-bottom: var(--eo3);
}

/* Titulares de páginas */
.titular {
    margin-top: var(--eo2);
}

.titular>* {
    grid-column: 1/-1;
    margin-bottom: var(--eo1);
    position: relative;
}

/* caja 1 - líneas */
.c1 {
    padding: var(--eo1) 0;
}

.c1::after,
.c1::before {
    content: "";
    height: 1px;
    width: 70%;
    display: block;
    position: absolute;
    z-index: 1;
}

.c1::after {
    border-top: solid var(--beI) rgb(var(--crS0));
    left: 0;
    top: 0;

}

.c1::before {
    border-bottom: solid var(--beI) rgb(var(--crS0));
    right: 0;
    bottom: 0;
}

/* Detalle de productos */
.gri .producto {
    height: 280px;
    ;
}

.gri .logOK {
    height: 330px;
    overflow: hidden;
}

.logOK .productoOpciones {
    background: rgba(var(--crS0), var(--od3));
    position: absolute;
    top: var(--eo0);
    left: var(--eo0);
    right: var(--eo0);
    padding: var(--eo0) 0;
    gap: var(--eo0);
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
    transform: scale(1) translateY(-150%);
    transition: var(--AnM0);
    /* opacity: 0; */
    /* z-index: -1; */
    height: calc(100% - var(--eo0))

}

/* .logOK:hover .productoOpciones{ */
.logOK .productoOpciones.pOver {
    transform: scale(1) translateY(0%);
}

.logOK .productoOpciones>form {
    margin-top: auto;
    width: 96%;
    display: flex;
    justify-content: center;
    flex-flow: column;
    gap: var(--eo0);
    align-items: center;
}
.logOK .tablaD{
    width: calc(100% - var(--eo2));
    padding: var(--eo0);
    background: rgb(var(--crB));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 3fr;
}
.logOK .tablaD > *{
    font-size: var(--fs5);
    border-bottom:  thin solid rgba(var(--crG2), var(--od3));
    line-height: 1.5;

}
.logOK .tablaD div{
    text-align: center;

}
.logOK .tablaD span{
    text-align: right;
    color: rgb(var(--crT0));
    font-weight: bold;
    width: 100%;
    display: block;
}


.logOK .pOsubTotal{
    background: rgb(var(--crB));
    color: rgb(var(--crT1));
    font-weight: bold;
    width: 93%;
    display: block;
    font-size: var(--fs3);
    letter-spacing: 2px;
    text-align: center;
}

.logOK .sN{
    margin-top: auto;
}
.logOK .sN input{
    border: none;
}

.producto span {
    display: flex;
    flex-flow: column;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--eo0);
}

.producto span div {
    display: flex;
    font-size: var(--fs4);
    align-items: center;
    border-top: thin solid rgb(var(--crG3));
    width: 80%;
    justify-content: center;
    align-items: center;
    padding-top: var(--eo0);
    margin-top: var(--eo0);

}

.producto span div * {
    color: rgb(var(--crS0));
}

.producto span s {
    justify-self: end;
    font-size: var(--fs6);
    color: rgb(var(--crT0));

}
.logOK .tablaD .descSele{
    color: rgb(var(--crP0));
    font-weight: bold;
}

.dataOver{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr var(--eo4);
    padding: var(--eo1) var(--eo1) 0 var(--eo1) ;
    gap: var(--eo0);
}
.producto button {
    width: 100%;
    font-size: 0.8rem;
    align-self: center;
    z-index: 1;
    /* margin-top: var(--eo0); */
    background: rgb(var(--crB));
}
.producto .proAgregar{
    width: 94%;
}
.cerarOver{
    background: rgb(var(--crB));
    width: var(--eo4);
    height: var(--eo4);
}
.producto .infoExtra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--eo0);
}

[class*='productoStock'] {
    font-size: var(--fs5);
    color: rgb(var(--crB));
    padding: 0 var(--eo0);
    background: rgb(var(--crE2));
}

.productoStockNo {
    background: rgb(var(--crE0));
}

.productoStockSi {
    background: rgb(var(--crE1));
}


.verVademecum {
    cursor: pointer;
}

.vmProducto h3 {
    width: 90%;
    color: rgb(var(--crP0));
    padding-top: var(--eo1);

}

.vmProducto b {
    width: 90%;
    color: rgb(var(--crP0));
    font-size: var(--fs5);
}

.vmProducto .main {
    flex-flow: column;
    gap: var(--gap);

}

.vmProducto .img {
    position: relative;
    height: 250px;
}

.vmProducto .imgNov {
    height: auto;
}

.vmProducto p {
    display: block;
    padding-bottom: var(--eo2);
    border-bottom: solid var(--beI) rgb(var(--crG2));
}

picture {
    width: 100%;
    position: relative;
}

.trama::after {
    content: "";
    /* background: pink; */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('../img/c/miv_fondo.png') no-repeat center;
    background-size: cover;
    /*contein*/
    mix-blend-mode: multiply;
}

/* carro */
.nav .carro i {
    font-size: 1.3em;
    color: rgb(var(--crP0));
    width: var(--eo3);
}

.carro {
    cursor: pointer;
}

/* usuarios y logueo */

#noLog::after,
#siLog::after {
    content: '';
    font-family: ftI;
    font-size: 1.3em;
    width: var(--nv0);
    height: var(--nv0);
    position: relative;
}

#noLog::after {
    content: '';
    color: rgb(var(--crE0));
}

#siLog::after {
    content: '';
    color: rgb(var(--crE1));
}

.loginBar {
    position: relative;
}

.loginBar .infoUsuario {
    position: absolute;
    right: 0;
    top: calc(var(--nv0)*1.05);
    width: var(--eo8);
    padding: var(--eo1);
    box-shadow: var(--saM);
    background: rgb(var(--crS0));
    color: rgb(var(--crT3));
    display: none;
}

.infoUsuario::after {
    content: '';
    font-family: ftI;
    font-size: 1.5em;
    top: -18px;
    right: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: rgb(var(--crS0));
    position: absolute;
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: rgb(var(--crS0));
}

.loginBar .mostrar {
    display: block;
}

.vademecum {
    width: 120px;
    font-size: 0.8em;
}

/* ----------------- */
/* login */
.logueo {
    background: rgb(var(--crB));
    width: 90%;
    max-width: 380px;

    margin: auto;
    padding: var(--gap);

    display: flex;
    flex-flow: column;

}

.logueo h2 {
    margin-bottom: var(--gap);
    justify-content: start;
    line-height: var(--fs00);
}

.logueo h2 i {
    margin-right: var(--eo1);
    color: rgb(var(--crS0));
    font-size: var(--fs00);
}

/* ----------------- */
/* Barra Buscar */

.barraTienda {
    background: rgb(var(--crS0));
    position: sticky;
    margin-top: var(--gap);
    top: var(--nv0m);
    z-index: var(--ziEf);
    box-shadow: var(--saN);
    display: flex;
    align-items: center;
    justify-content: center;

    border: solid rgb(var(--crG2)) var(--beI);
    border-left: none;
    border-right: none;
}

.clienteLog {
    display: none;
}

.barraTienda .buscar {
    display: grid;
    grid-template-columns: var(--eo4) 2fr 2fr;
    gap: var(--eo1);
    padding: var(--eo0) var(--eo1);

    max-width: 380px;
    align-items: center;
}

.barraTienda .buscar #reset i {
    color: rgb(var(--crB));
}

/* Resultados */
.resultados {
    font-family: 'ft1';
    border-bottom: solid rgb(var(--crG2)) thin;
}


/* Loading */
.loading {
    position: fixed;
    z-index: var(--ziM);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading img {
    max-width: 250px;
    max-height: 250px;
    background: rgb(var(--crB));
    box-shadow: var(--saM);
    border-radius: var(--brS);
}

/* HOME - Ver más */
.verMas {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: var(--eo4);
    justify-content: center;
    align-items: center;
    border-top: solid rgb(var(--crG2)) thin;
    margin-bottom: var(--eo2);
}

/* options del select */
option {
    font-size: 1.1em;
}

/********** Detalle de productos **********/

/* Título - Total */
.carroListado h3 {
    width: calc(100% - var(--eo1));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carroListado h3 b {
    font-size: var(--fs2);
    color: rgb(var(--crE1));
    letter-spacing: 2px;
}

/* visualiazación */
.tipoVisualizacion {
    border-bottom: thin solid rgb(var(--crG3));
    display: flex;
    justify-content: end;
    align-items: center;
    height: var(--eo5);
    /* gap: var(--eo0); */
}

.tipoVisualizacion p {
    font-size: var(--fs4);
    color: rgb(var(--crP0));
}

.tipoVisualizacion i {
    font-size: var(--fs4);
}

/* Contenedores */
.carroListado section {
    display: flex;
    flex-flow: column;
    gap: var(--gap);
    margin-top: var(--gap);
}

.carroListado article {
    box-shadow: var(--saN);
    border-top: var(--beI) solid rgb(var(--crG2));
    position: relative;
    padding: var(--eo1);
    display: grid;
    gap: var(--eo1);
    transition: var(--AnM0);
}

/* -AMPLIADA- */
.carroListado article {
    grid-template-columns: 100px repeat(2, 1fr);
}

.carroListado .nombreProducto {
    grid-column: 1 / -1;
}

.carroListado .pData {
    grid-column: 1 / 2;
}

.carroListado .pCalculadora {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--fs4) var(--eo2) auto;
    max-width: 320px;
    justify-self: end;
    z-index: 1;
}

.carroListado .pCalculadora form>*{
    width: auto;
    max-width: 150px;
}
.carroListado .pCalculadora form> button{
    z-index: -1;
    position: absolute;
}
.carroListado .sN {
    grid-row: 1 / span 2;
    width: auto;
    margin-right: var(--eo1);
    font-weight: bold;
    justify-self: end;
    justify-content: end;
}

.carroListado .sN input {
    font-weight: bold;
}

@media all and (max-width:460px) {
    .carroListado .sN i {
        display: none;
    }
    .carroListado .pCalculadora form>*{
        width: 100%;
        min-width: var(--eo4);
    }
}


.carroListado .pTabla {
    grid-column: 1/-1;
    margin-top: var(--eo1);
}

.carroListado .nombreProducto [class*='pStock'] {
    display: none;
}

/* -COMPACTA- */
.carroListado .compacta article {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    padding-top: 1.35em;
}

.carroListado .compacta .nombreProducto {
    grid-column: 1 / 2;
}

.carroListado .compacta h4 {
    grid-column: 1 / 2;
    font-family: 'ft1';
    font-size: var(--fs6);
    line-height: 1.1;
}

.carroListado .compacta .pCalculadora {
    grid-column: 2 / -1;
    grid-row: 1 / span 2;
}

.carroListado .compacta .pSubTotal {
    font-size: var(--fs4);
    letter-spacing: 1px;
    margin-top: var(--eo0);
}

.carroListado .compacta .nombreProducto [class*='pStock'] {
    display: block;
}

.compacta .trama,
.compacta [class*='productoStock'],
.compacta .pTabla {
    display: none;
}




/* eliminiar */
.carroListado .eliminar {
    border: var(--beI) solid rgb(var(--crG2));
    background: rgb(var(--crB));
    width: var(--eo2);
    height: var(--eo2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: absolute;
    right: var(--eo1);
    top: calc(var(--eo2)/-2);
    cursor: pointer;
    transition: var(--AnM0);
}

.carroListado .eliminar i {
    color: rgb(var(--crG2));
}

.carroListado .eliminar:hover i {
    color: rgb(var(--crE0));
    transform: scale(1.2);
}

/* nombre producto */
.nombreProducto {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    margin-top: var(--eo0);
    gap: var(--eo0);
}

.nombreProducto h4 {
    color: rgb(var(--crP0));
    font-family: 'ft0';
    font-size: var(--fs5);
}

[class*='pStock'] {
    min-width: var(--eo1);
    height: var(--eo1);
    margin-top: 3px;
}

.pStock0 {
    background: rgb(var(--crE0));
}

.pStock1 {
    background: rgb(var(--crE1));
}

.pStock2 {
    background: rgb(var(--crE2));
}

/* img - stock - código */
.pData {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    max-width: 100px;
}
@media all and (max-width:366px) {
    .pData {
        max-width: 70px; 

    }
    

}
.pData picture,
.pData .trama::after {
    height: 100px;
}

/* datos de cálculo */
.pUnitario {
    font-size: var(--fs6);
    color: rgb(var(--crT1));
    text-align: right;
}

.pSubTotal {
    font-size: var(--fs4);
    color: rgb(var(--crT0));
    font-weight: bold;
    text-align: right;
    padding-top: 0;
    letter-spacing: 2px;
}

/* Tabla de descuentos */

.pTabla>div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-size: var(--fs5);
    border-bottom: thin solid rgb(var(--crG3));
}

.pTabla>div:first-child {
    border-bottom: thin solid rgb(var(--crG2));
}

.pTabla * {
    font-size: inherit;
    color: rgb(var(--crG0));
    line-height: 1.5;
}

.pTabla>div:first-child div {
    color: rgb(var(--crG1));
    font-weight: bold;
}

.pTabla div> :last-child {
    grid-column: -3/-1;
    text-align: right;
}

/* mensaje */
.carroListado .mensaje {
    margin-top: var(--gap);
    background: rgb(var(--crS0));
    padding: var(--gap);
}

.carroListado .mensaje label {
    color: rgb(var(--crT3));
    font-size: var(--fs4);
    margin-bottom: var(--eo1);

}

.carroListado #mensaje {
    min-height: var(--eo6);
}

/* Cerrar Sessión */
.cerrarSesion h4 {
    margin: var(--eo2) 0 var(--eo1) 0;
}

/* Contacto */
.formContacto form{
    grid-column: 1/-1;
}

.formContacto #consulta{
    min-height: var(--eo7);
    padding-top: var(--eo0);
}

.formContacto h2{
    grid-column: 1/-1;
    margin-top: var(--eo4);
    text-align: center;
}

.descargarLista{
    grid-column: 1/-1;
    margin-top: var(--eo2);
    text-align: center;
}
.formContacto p{
    grid-column: 1/-1;
    margin-top: var(--eo2);
    text-align: center;
}
.descargarLista .btPbt4{
    width: auto;
}

#descargaLista{
    width: 10px;
    height: 10px;
    display: block;
    background: transparent;
    position: absolute;
    top: calc(var(--eo6)*2)
}


#enviar{
    margin-top: var(--eo1);
}