/*
En comunes debemos tener .titulo1, .titulo2 y titulo3
La familia de la fuente se hereda del body
*/

/* # # #  COLORES  # # # */
/*Menú (Lista)*/
.color1{ color: #fff; }
.bg1{ background-color: #1565c0;}
.bg1:hover{ background-color: #0b5bb6; }

/* Precios y botones (menú, enviar)*/
.color2{ color: #fff; } 
.bg2{ background-color: #1565c0; }

/*Paginación*/
.color3{ color: #666; }
.bg3{ background-color: #eaeaea; }
.bg3:hover{ background-color: #ddd; }
.bg4{ background-color: #f0f0f0; } /* destacado */
.bg4:hover{ background-color: #eaeaea; }


/*Otros*/
.color4{ color: #444; } /* Color títulos*/
.color5{ color: #1565c0 } /* Color Categorías */
.bg5, .escaparate1 .compmenu, .escaparate1-2 .compmenu, .escaparatecont .noprod, .escaparatecont .nocat{ background: #FFF; } /* Fondo fichas, No Resultado y Menú
↑↑↑↑↑↑↑↑↑↑ Afecta al article .cont .desc:before*/
.color6 { color: #666; } 
.bg6 { background-color: #f5f5f5; } /* Fondo formulario + fondo lista productos carrito*/

/* # # # # # # # # # # # */
.btn-edit {display:block;margin-bottom:16px;text-align:right;text-decoration:none;}
input, textarea, button, select { border-radius: 0; background: white; box-shadow: none; }
.btnsiguiente { border: 0; padding: 10px 20px; border-radius: 4px; float: right; margin: 0; text-decoration: none; }
.confpago{  overflow: hidden; padding:0 20px 30px}
.confpago > div { padding: 20px 0 0!important; border-radius: 4px; float: right; }
.confpago .obscajon { padding: 20px; border-radius: 4px; margin: 0 0 20px; }
.confpago .obscajon .titulo2{ margin: 0 0 10px; }
.confpago .obscajon #pConcepto{margin-top:8px;}
.confpago #dvObservaciones { font-style: italic; }

#dvPedCarrito #dvProds table tr:first-of-type th:first-child{ text-align: left;  }
#dvPedCarrito #dvProds{ padding: 10px; }
#dvPedCarrito #dvProds table{ width: 100%; text-align: center;}
#dvPedCarrito #dvProds table tr:first-of-type{ border-bottom: 1px solid rgba(0,0,0,0.1); padding: 4px}
#dvPedCarrito #dvProds table tr:first-of-type th{ padding: 5px; }
#dvPedCarrito #dvProds table #trLineaTotal td{  border-bottom:0; }
#dvPedCarrito #dvProds table td{ padding: 12px 4px;}
#dvPedCarrito #dvProds table #trLineaProd td{ border-bottom: 1px solid rgba(0,0,0,0.05); }
#dvPedCarrito #dvProds table tr:not(#trLineaProd) td:nth-last-child(2), #dvPedCarrito #dvProds table tr:not(#trLineaProd) td:last-child{ border-bottom: 1px solid rgba(0,0,0,0.05); }
#dvPedCarrito #dvProds table tr td:first-child, #dvCartConProds #dvProds table tr th:first-child{ text-align: left; }
#dvPedCarrito #dvProds table tr:last-child{ font-weight: bold;}
#dvPedCarrito #dvProds table tr:last-child td{ border: 0 !important; }
#dvPedCarrito input[type="checkbox"], input[type="radio"]{ margin-right: 5px; }
#dvPedCarrito .dvTitObs { display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 12px; line-height: 14px; padding: 0 0 10px; letter-spacing: 2px; font-weight: bold; }
.confpagobtn{ display: flex; align-content: center}
.confpagobtn .btnsiguiente{ float: none; }
.btnacepto{ margin: 0 10px 0 0; text-align: right; width: 100%; align-self: center; }
/*.btnacepto > * { display: inline-block; vertical-align: middle; }*/
.btnacepto input{ margin-right: 5px; }
#tbObservaciones { width: 100%; resize: vertical; padding: 4px; border: 1px solid rgba(0,0,0,0.1); margin-top: 4px; padding: 8px; border-radius: 4px; }

/* PAGOINMEDIATO */
.pagoinmediato.estilo2 .picols { flex-direction:column;}
.pagoinmediato.estilo2 .picolizq { width: 100%;  overflow: hidden; order:2; background:#f5f5f5; }
.pagoinmediato.estilo2 .picolder { width: 100%; display: flex; order:1;height:360px; }

.dvDesc{ margin: 0 0 20px; }
.pagoinmediato{ overflow: hidden;}
.pagoinmediato .picols{ display: flex;}
.pagoinmediato .picolizq .datos-id { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; }
.pagoinmediato .picolizq { width: 60%; padding: 20px; overflow: hidden; }
.pagoinmediato .picolder{  width: 40%; display: flex; }
.pagoinmediato .picolder .piimg{ height: 100%; width: 100%; background-image: url(../images/piimg.jpg); background-size: cover; background-position: center; }
.pagoinmediato .picolizq p{ margin: 0; }
.pagoinmediato #pObsDesc{ opacity: 0.8; }
.pagoinmediato .dvDescPie{ margin: 0 0 20px; }
.pagoinmediato .picolizq .pi_concepto { grid-column: span 2; }
.pagoinmediato .picolizq .piresumen { grid-column: span 2; }
.pagoinmediato .picolizq .datos-id > p > * { display: block; width: 100%; }
.pagoinmediato .picolizq .datos-id > p.required span:after { content: "*" }
.pagoinmediato .picolizq #pObs.required:after{ content:"*" }
.pagoinmediato .picolizq .datos-id > p > span, .pagoinmediato .picolizq > div > p { font-weight: bold; }
.pagoinmediato .picolizq .datos-id > p input { width: 100%;font-weight:normal; border: 1px solid rgba(0,0,0,0.14); padding: 8px; margin-top: 4px; border-radius: 4px; }
/*.pagoinmediato .picolizq > .pi_importe { clear: both; width: 100%; margin: 8px 0; padding: 12px; display: flex; border-radius: 4px; }
.pagoinmediato .picolizq > .pi_importe span{ width: auto; align-self: center; margin-right: 10px;}*/
.pagoinmediato .picolizq .datos-id > .pi_importe { border-radius: 4px; padding:8px;background:#ddd; }
.pagoinmediato .picolizq .datos-id > .pi_concepto { width: 100%; margin: 0 0 20px; }
.pagoinmediato .picolizq .observaciones{ width: 100%; clear: both; margin:8px 0 20px; }
.pagoinmediato .picolizq #dvFormasPago{ overflow: hidden; clear: both; }
.pagoinmediato .picolizq #dvFormasPago tr td > *{ display: inline-block; vertical-align: middle; }
.pagoinmediato .picolizq #dvFormasPago p{ margin: 0; }
.pagoinmediato .picolizq #dvFormasPago #pDescFormaPago{ font-size: 90%; font-weight:normal; line-height:130%; }
.pagoinmediato .picolizq #dvFormasPago #rbtFormasPago{ margin: 0 0 10px; }
.pagoinmediato .picolizq #dvFormasPago #rbtFormasPago tr{ display: inline-block; margin: 10px 20px 10px 0; }
.pagoinmediato .picolizq .piresumen{ overflow: hidden; padding: 8px; margin:20px 0; border-radius: 4px;text-align:right; }
.pagoinmediato .picolizq .piresumen p { display: flex; padding: 5px; }
.pagoinmediato .picolizq .piresumen p > span:last-child {  text-align: right; width: 120px; }
.pagoinmediato .picolizq .piresumen p > span:first-child{ width: 100%; }
#pDescFormaEnvio:before, #pDescFormaPago:before { content:"\f05a"; font-family: "Font Awesome 5 Pro"; font-weight:900; font-style: normal; margin-right: 5px;}

#dvPedPagoInmediato { overflow: hidden; position: relative; padding: 20px ; }
#dvPedPagoInmediato .titulo2{ margin: 0 0 10px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 10px}
#dvPedPagoInmediato p{ margin: 0;}
#dvPedPagoInmediato .cont { display: flex; justify-content:space-between;flex-wrap:wrap;}
#dvPedPagoInmediato .cont div { width: calc(40% - 12px); }
#dvPedPagoInmediato .cont div:last-child { width: calc(20% - 12px); }
#dvPedPagoInmediato .dvProdCont{ float: none; width: 100%; clear: both; padding: 0px; margin: 0; }
#dvPedPagoInmediato ul{ overflow: hidden; }
#dvPedPagoInmediato li { list-style: none; margin: 0 0 10px;}
#dvPedPagoInmediato li:last-child{ margin:0; }

#sumGuardarPago{ color: red; padding: 20px 0 0; clear: both;}
#sumGuardarPago br:nth-of-type(2n){ display: none; }
.pagoinmediato.resumen { padding: 20px; }

/* CKECKS*/
.checkbtn {position: relative; display: inline-block; line-height: 30px; overflow: hidden; width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;}
.checkbtn input { position: absolute; z-index: -1; opacity: 0; right: 100%; }
.checkbtn .control__indicator{ display: block; width: 20px; height: 20px; background: white; border: 2px solid #ccc; border-radius: 4px; text-align: center; line-height: 16px; cursor: pointer; }
.checkbtn .control__indicator:after {content: ''; display: none; }
.checkbtn input:checked ~ .control__indicator:after { display: block; }
.checkbtn .control--checkbox .control__indicator:after { content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight:900; width: 100%; text-align: center; font-size: 16px;}
.checkbtn .control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b;}
.radiobtn input[type="radio"]{ opacity: 0; position: absolute; z-index: -1; }
.radiobtn label:before{ content: ""; display: inline-block; height: 16px; width: 16px; background: white; border: 2px solid #ccc; border-radius: 100%; text-align: center; line-height: 16px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.radiobtn input[type="radio"]:checked ~ label:before { background: #666666; background: -moz-radial-gradient(center, ellipse cover, #666666 0%, #666666 40%, #ffffff 50%, #ffffff 100%, #ffffff 100%); background: -webkit-radial-gradient(center, ellipse cover, #666666 0%,#666666 40%,#ffffff 50%,#ffffff 100%,#ffffff 100%); background: radial-gradient(ellipse at center, #666666 0%,#666666 40%,#ffffff 50%,#ffffff 100%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#ffffff',GradientType=1 ); }

/* ##### ESCAPARATE ##### */
form.escaparate { }

/* ERROR 404*/
.dvError404{  }
.dvError404 .btn404 a{ display: inline-block; margin-right: 10px; padding: 8px 16px; border-radius: 4px; text-decoration: none; margin: 0 10px 10px 0; }
.dvError404 p{ margin: 0 0 20px; }

@media screen and (max-width: 767px) {
    #dvProds table { display: block; width: 100%; }
    #dvProds table > * { display: block; width: 100%; }
    #dvProds table tr:first-child { display: none; }
    #dvProds table tr { display: block; overflow: hidden; padding-bottom: 20px; }

    #dvProds table td { display: block; float: left; text-align: right; padding: 10px 0; }
    #dvProds table td:first-child { width: 100%; float: none; font-weight: bold; }
    #dvProds table td:nth-child(2) { width: 50%; text-align: left; border: 0; }
    #dvProds table td:nth-child(3) { width: 40%; border: 0; }
    #dvProds table td:nth-child(4) { width: 10%; border: 0; }
    .btncant { float: left; }
    .btncant a { display: inline-block; margin: 0 10px; }
    .btncant a:first-child { float: right; }
    .btncant a:last-child { float: left; }

    #dvProds table #trLineaTotal { font-weight: bold; border-top: 1px solid rgba(0,0,0,0.05); }
    #dvProds table #trLineaTotal td:first-child { display: none; }
    #dvProds table #trLineaTotal { padding-bottom: 0; }

    /* PAGO INMEDIATO */
    .pagoinmediato .picolizq .datos-id { grid-template-columns: 1fr; }
    .pagoinmediato .picolizq .pi_concepto { grid-column: 1; }
    .pagoinmediato .picolder { height: 260px!important; order: 1; }
    .pagoinmediato .picolizq { order: 2; }
    /* FORMULARIO */
    .compform > div { width: 100%; clear: both; }
    .compform .suma > span { text-align: center; }

    .pagoinmediato .picols { flex-direction: column; }
    .pagoinmediato .picolizq, .pagoinmediato .picolder { width: 100%; }

    #dvPedPagoInmediato .cont div { width: 100% !important; margin: 0 0 20px; }
    #dvPedPagoInmediato .cont div:last-child { margin: 0; }
}
 @media screen and (max-width: 480px) {
    .pagoinmediato .picolizq > p { width: 100%; margin: 0 0 10px; }
    .pagoinmediato .picolizq > .pi_importe { padding: 20px; }
    .pagoinmediato .picolder { height: 200px !important; }
    .confpago .obscajon { padding: 16px; }
    .pagoinmediato .picolizq .piresumen { font-size: 16px; line-height: 120%; }
    .confpagobtn { flex-direction: column; }
    .btnacepto { margin: 0 0 10px; text-align: center; }
}