<?php
include 'config.php';
$lang = $_GET['lang'];
$id = $_GET['id'];
//echo $lang;
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_URL => $endpoint_graph_cms,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS =>'{"query":"query MyQuery {\\r\\n  generalidadDelSitio(where: {id: \\"ckl076cy05vf80a267cvo1kzv\\"}, stage: PUBLISHED) {\\r\\n    direccionIndeval\\r\\n    imagenBuzonDeTransparencia\\r\\n    imagenLogoFooter\\r\\n    linkBuzonDeTransparencia\\r\\n    id\\r\\n    textoBuzonDeTransparencia\\r\\n    textoCopyright\\r\\n    tituloColumna1Footer\\r\\n    tituloColumna2Footer\\r\\n    tituloColumna3Footer\\r\\n  tituloMarketData\\r\\n  textoMarketData\\r\\n   imagenMarketData\\r\\n   linkMarketData\\r\\n    logotipoPrincipal\\r\\n    localizations {\\r\\n      direccionIndeval\\r\\n      imagenBuzonDeTransparencia\\r\\n      imagenLogoFooter\\r\\n      linkBuzonDeTransparencia\\r\\n     tituloMarketData\\r\\n textoMarketData\\r\\n   imagenMarketData\\r\\n   linkMarketData\\r\\n   logotipoPrincipal\\r\\n      textoBuzonDeTransparencia\\r\\n      textoCopyright\\r\\n      tituloColumna1Footer\\r\\n      tituloColumna2Footer\\r\\n      tituloColumna3Footer\\r\\n    }\\r\\n  }\\r\\n}\\r\\n","variables":{}}',
    CURLOPT_HTTPHEADER => array(
      'Content-Type: application/json',
      'Cookie: __cfduid=da2693cdfd39b7377a8a05e305da45b8f1613001694'
    ),
  ));
  
$response = curl_exec($curl);

curl_close($curl);
//echo $response;

$jsonrespuesta = json_decode($response, true);
$id = $jsonrespuesta['data']['generalidadDelSitio']['id'];

if($lang == 'es'){
    $direccionIndeval = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['direccionIndeval'];
    $imagenLogoFooter = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['imagenLogoFooter'];$linkBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['linkBuzonDeTransparencia'];
    $textoBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['textoBuzonDeTransparencia'];
    $textoCopyright = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['textoCopyright'];
    $tituloColumna1Footer = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['tituloColumna1Footer'];
    $tituloColumna2Footer = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['tituloColumna2Footer'];
    $tituloColumna3Footer = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['tituloColumna3Footer'];
    $logotipoPrincipal = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['logotipoPrincipal'];
    $imagenBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['imagenBuzonDeTransparencia'];
    $tituloMarketData = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['tituloMarketData'];
    $textoMarketData = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['textoMarketData'];
    $imagenMarketData = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['imagenMarketData']; 
    $linkMarketData = $jsonrespuesta['data']['generalidadDelSitio']['localizations'][0]['linkMarketData'];
    

    
}

if($lang == 'en'){
    $direccionIndeval = $jsonrespuesta['data']['generalidadDelSitio']['direccionIndeval'];
    $imagenLogoFooter = $jsonrespuesta['data']['generalidadDelSitio']['imagenLogoFooter'];$linkBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['linkBuzonDeTransparencia'];
    $textoBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['textoBuzonDeTransparencia'];
    $textoCopyright = $jsonrespuesta['data']['generalidadDelSitio']['textoCopyright'];
    $tituloColumna1Footer = $jsonrespuesta['data']['generalidadDelSitio']['tituloColumna1Footer'];
    $tituloColumna2Footer = $jsonrespuesta['data']['generalidadDelSitio']['tituloColumna2Footer'];
    $tituloColumna3Footer = $jsonrespuesta['data']['generalidadDelSitio']['tituloColumna3Footer'];
    $logotipoPrincipal = $jsonrespuesta['data']['generalidadDelSitio']['logotipoPrincipal'];
    $imagenBuzonDeTransparencia = $jsonrespuesta['data']['generalidadDelSitio']['imagenBuzonDeTransparencia'];
    $tituloMarketData = $jsonrespuesta['data']['generalidadDelSitio']['tituloMarketData'];
    $textoMarketData = $jsonrespuesta['data']['generalidadDelSitio']['textoMarketData'];
    $imagenMarketData = $jsonrespuesta['data']['generalidadDelSitio']['imagenMarketData']; 
    $linkMarketData = $jsonrespuesta['data']['generalidadDelSitio']['linkMarketData'];
}

?>


<form class="formprod" id="formprod" enctype="multipart/form-data" autocomplete="off">
        <input name="id" id="idprod" type="hidden" value="<?php echo $id;?>">
        <input name="newimg" id="newimg" type="hidden" value="">
        <input name="newimg2" id="newimg2" type="hidden" value="">
        <input name="newimg3" id="newimg3" type="hidden" value="">
        <input name="newimg4" id="newimg4" type="hidden" value="">
        
        <input name="oldimg" id="oldimg" type="hidden" value="<?php echo $logotipoPrincipal;?>">
        <input name="oldimg2" id="oldimg2" type="hidden" value="<?php echo $imagenLogoFooter;?>">
        <input name="oldimg3" id="oldimg3" type="hidden" value="<?php echo $imagenBuzonDeTransparencia;?>">
        <input name="oldimg4" id="oldimg4" type="hidden" value="<?php echo $imagenMarketData;?>">

        
        
        <div class="formgroup desc">
            <label for="linkes">Dirección Indeval*</label>
            <textarea name="direccionIndeval" type="text" id="direccionIndeval" maxlength="500" placeholder="Al menos 5 caracteres."><?php echo urldecode($direccionIndeval);?></textarea>
        </div>

        
        <div class="formgroup desc">
            <label for="linken">Link Buzón de Transparencia*</label>
            <textarea name="linkBuzonDeTransparencia" type="text" id="linkBuzonDeTransparencia" maxlength="300" placeholder="Al menos 5 caracteres."><?php echo $linkBuzonDeTransparencia;?></textarea>
        </div>

        <div class="formgroup desc">
            <label for="linkes">Texto Buzón de Transparencia*</label>
            <textarea name="textoBuzonDeTransparencia" type="text" id="textoBuzonDeTransparencia" maxlength="500" placeholder="Al menos 5 caracteres."><?php echo urldecode($textoBuzonDeTransparencia);?></textarea>
        </div>
        
        <div class="formgroup desc">
            <label for="textoCopyright">Texto Copyright*</label>
            <textarea name="textoCopyright" type="text" id="textoCopyright" maxlength="500" placeholder="Al menos 5 caracteres."><?php echo urldecode($textoCopyright);?></textarea>
        </div>

        <div class="formgroup desc">
            <label for="tituloColumna1Footer">Título Columna Footer 1*</label>
            <input name="tituloColumna1Footer" type="text" id="tituloColumna1Footer" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo urldecode($tituloColumna1Footer);?>">
        </div>

        <div class="formgroup desc">
            <label for="tituloColumna2Footer">Título Columna Footer 2*</label>
            <input name="tituloColumna2Footer" type="text" id="tituloColumna2Footer" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo urldecode($tituloColumna2Footer);?>">
        </div>
        

        <div class="formgroup desc">
            <label for="tituloColumna3Footer">Título Columna Footer 3*</label>
            <input name="tituloColumna3Footer" type="text" id="tituloColumna3Footer" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo urldecode($tituloColumna3Footer);?>">
        </div>
        
        
         <div class="formgroup desc">
            <label for="tituloMarketData">Título Notificación</label>
            <input name="tituloMarketData" type="text" id="tituloMarketData" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo urldecode($tituloMarketData);?>">
        </div>
        
        <div class="formgroup desc">
            <label for="textoMarketData">Texto Notificación</label>
            <input name="textoMarketData" type="text" id="textoMarketData" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo urldecode($textoMarketData);?>">
        </div>

        <div class="formgroup imgcont">
            <label for="imagenprod">Ícono Notificación</label><br>
           
            <div class="imagendiv">
                <?php 
                
                if(strlen($imagenMarketData)>1){
                    $foto = '<img src="'.$cloudfront.$imagenMarketData.'" class="imgprod" id="uploadPreview4">';
                }
                else{
                    $foto = '<img src="/admin2/img/camera2.svg" class="imgprod camera" id="uploadPreview4">';
                }
                echo $foto?>
            
                 <div class="image-upload">
                    <label for="imagenMarketData" aria-label="Elegir imagen" data-balloon-pos="up">
                        <img src="/admin2/img/photo.svg"/>
                    </label>

                    <input name="imagen4" type="file" id="imagenMarketData" accept="image/*" value="" onchange="PreviewImage4();" >

                </div>  
            </div>
            <p class="discimg">Sólo imágenes con formato .png, .jpg, .gif o .webp / Peso máximo: 500 Kb</p>
        </div>
        
        

        <div class="formgroup desc">
            <label for="linkMarketData">Link Notificación</label>
            <input name="linkMarketData" type="text" id="linkMarketData" maxlength="500" placeholder="Al menos 5 caracteres." value="<?php echo $linkMarketData;?>">
        </div>
        

        <div class="formgroup imgcont">
            <label for="imagenprod">Logo Indeval*</label><br>
           
            <div class="imagendiv">
                <?php 
                
                if(strlen($logotipoPrincipal)>1){
                    $foto = '<img src="'.$cloudfront.$logotipoPrincipal.'" class="imgprod" id="uploadPreview">';
                }
                else{
                    $foto = '<img src="/admin2/img/camera2.svg" class="imgprod camera" id="uploadPreview">';
                }
                echo $foto?>
            
                 <div class="image-upload">
                    <label for="imagenprod" aria-label="Elegir imagen" data-balloon-pos="up">
                        <img src="/admin2/img/photo.svg"/>
                    </label>

                    <input name="imagen" type="file" id="imagenprod" accept="image/*" value="" onchange="PreviewImage();" >

                </div>  
            </div>
            <p class="discimg">Sólo imágenes con formato .png, .jpg, .gif o .webp / Peso máximo: 500 Kb</p>
        </div>
        
        <div class="formgroup imgcont">
            <label for="imagenprod">Logo BMV (Footer)*</label><br>
           
            <div class="imagendiv">
                <?php 
                
                if(strlen($imagenLogoFooter)>1){
                    $foto = '<img src="'.$cloudfront.$imagenLogoFooter.'" class="imgprod" id="uploadPreview2">';
                }
                else{
                    $foto = '<img src="/admin2/img/camera2.svg" class="imgprod camera" id="uploadPreview2">';
                }
                echo $foto?>
            
                 <div class="image-upload">
                    <label for="imagenprod2" aria-label="Elegir imagen" data-balloon-pos="up">
                        <img src="/admin2/img/photo.svg"/>
                    </label>

                    <input name="imagen2" type="file" id="imagenprod2" accept="image/*" value="" onchange="PreviewImage2();" >

                </div>  
            </div>
            <p class="discimg">Sólo imágenes con formato .png, .jpg, .gif o .webp / Peso máximo: 500 Kb</p>
        </div>
        
        <div class="formgroup imgcont">
            <label for="imagenprod">Ícono buzón de transparencia*</label><br>
           
            <div class="imagendiv">
                <?php 
                
                if(strlen($imagenBuzonDeTransparencia)>1){
                    $foto = '<img src="'.$cloudfront.$imagenBuzonDeTransparencia.'" class="imgprod" id="uploadPreview3">';
                }
                else{
                    $foto = '<img src="/admin2/img/camera2.svg" class="imgprod camera" id="uploadPreview3">';
                }
                echo $foto?>
            
                 <div class="image-upload">
                    <label for="imagenprod3" aria-label="Elegir imagen" data-balloon-pos="up">
                        <img src="/admin2/img/photo.svg"/>
                    </label>

                    <input name="imagen3" type="file" id="imagenprod3" accept="image/*" value="" onchange="PreviewImage3();" >

                </div>  
            </div>
            <p class="discimg">Sólo imágenes con formato .png, .jpg, .gif o .webp / Peso máximo: 500 Kb</p>
        </div>

        <a id="guardaredit" onclick="saveEdit('<?php echo $lang;?>');">Guardar</a>

    </form>

    <script>
        function saveEdit(lang){
            $("#guardaredit").css("pointer-events", "none");
            $("#guardaredit").css("opacity", ".4");
            var form=$("#formprod");
            var data=new FormData($("#formprod")[0]);
            for(var pair of data.entries()) {
            //console.log(pair[0]+ ', '+ pair[1]); 
            }
            var direccionIndeval = encodeURIComponent($("#direccionIndeval").val());
            var textoBuzonDeTransparencia = encodeURIComponent($("#textoBuzonDeTransparencia").val());
            var textoCopyright = encodeURIComponent($("#textoCopyright").val());
            var tituloColumna1Footer = encodeURIComponent($("#tituloColumna1Footer").val());
            
            var tituloColumna2Footer = encodeURIComponent($("#tituloColumna2Footer").val());
            var tituloColumna3Footer = encodeURIComponent($("#tituloColumna3Footer").val());
            var tituloMarketData = encodeURIComponent($("#tituloMarketData").val());
            var textoMarketData = encodeURIComponent($("#textoMarketData").val());
            $.ajax({
                url: "/admin2/updateInfo.php?direccionIndeval="+direccionIndeval+"&textoBuzonDeTransparencia="+textoBuzonDeTransparencia+"&textoCopyright="+textoCopyright+"&tituloColumna1Footer="+tituloColumna1Footer+"&tituloColumna2Footer="+tituloColumna2Footer+"&tituloColumna3Footer="+tituloColumna3Footer+"&tituloMarketData="+tituloMarketData+"&textoMarketData="+textoMarketData+"&lang="+lang,
                type:"POST",
                data:data,
                processData: false,
                contentType: false,
                success:function(data){
                    $('#respuestaedit').html(data);

                    setTimeout(() => {
                        $("#guardaredit").css("pointer-events", "inherit");
                        $("#guardaredit").css("opacity", "1");
                    }, 2000);
                }

            });
        }
        setTimeout(() => {
            //$("#columen").find("option[value='<?php echo $columes;?>']").attr("selected", true);  
        }, 1000);

        function PreviewImage() {
        if(document.getElementById("imagenprod").files[0].size > 500000){
            alert("El peso de la imagen excede 500 Kb. Comprime la imagen o selecciona una diferente.");
            $("#imagenprod").val("");
        };

        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("imagenprod").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
            $("#newimg").val("1");
        };
    };
function PreviewImage2() {
      if(document.getElementById("imagenprod2").files[0].size > 500000){
          alert("El peso de la imagen excede 500 Kb. Comprime la imagen o selecciona una diferente.");
          $("#imagenprod").val("");
      };

      var oFReader = new FileReader();
      oFReader.readAsDataURL(document.getElementById("imagenprod2").files[0]);

      oFReader.onload = function (oFREvent) {
          document.getElementById("uploadPreview2").src = oFREvent.target.result;
          $("#newimg2").val("1");
      };
  };
  
  function PreviewImage3() {
      if(document.getElementById("imagenprod3").files[0].size > 500000){
          alert("El peso de la imagen excede 500 Kb. Comprime la imagen o selecciona una diferente.");
          $("#imagenprod").val("");
      };

      var oFReader = new FileReader();
      oFReader.readAsDataURL(document.getElementById("imagenprod3").files[0]);

      oFReader.onload = function (oFREvent) {
          document.getElementById("uploadPreview3").src = oFREvent.target.result;
          $("#newimg3").val("1");
      };
  };
  
    function PreviewImage4() {
      if(document.getElementById("imagenMarketData").files[0].size > 500000){
          alert("El peso de la imagen excede 500 Kb. Comprime la imagen o selecciona una diferente.");
          $("#imagenMarketData").val("");
      };

      var oFReader = new FileReader();
      oFReader.readAsDataURL(document.getElementById("imagenMarketData").files[0]);

      oFReader.onload = function (oFREvent) {
          document.getElementById("uploadPreview4").src = oFREvent.target.result;
          $("#newimg4").val("1");
      };
  };
        
    </script>

<style>
    
    .formprod {
        width: 100%;
        float: left;
    }
    .formprod input, .formprod textarea {
        width: 100%;
        float: left;
        margin: 0;
        min-height: 38px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 5px 5px 0;
    }
    .imgprod {
        width: 130px;
        padding-top:15px;
    }
    
    #guardaredit, #guardarhorarios, #guardarmod {
        background: #94b300;
        color: #fff;
        float: none;
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        margin: 10px 0;
        font-weight: bold;
        max-width: 100%;
        display: inline-block;
        cursor: pointer;
        transition:.35s all ease;
    }
    #guardarmeta:hover {
        background: #333;
        transition:.35s all ease;
        color: #fff;
    }
    .imagendiv {
        float: none;
        width: 190px;
        position: relative;
        padding: 0 5%;
        margin-bottom: 2.5px;
        margin-top: 10px;
    }
    .image-upload>input {
      display: none;
    }
    .image-upload {
        width: auto;
        display: inline-block;
        position: absolute;
        left: 120px;
        top: -10px;
    }
    #descprod {
        height: 100px;
    }
    .image-upload img {
        width: 30px;
        cursor: pointer;
        transition: .35s all ease;
    }
    .image-upload img:hover {
        transition:.35s all ease;
        transform: scale(1.1);
    }
    
    .formgroup {
        width: 100%;
        float: left;
        text-align: left;
        font-weight: 500;
        color: #222;
        font-size: 12px;
        padding: 5px;
    }
    .formgroup.peq {
        width: 33%;
        float: right;
    }
    .formprod select {
        height: 40px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }
    .formgroup.imgcont label {
        width: auto;
        position: relative;
        z-index: 1;
    }
    .addnew {
        float: right;
        margin-top: 20px;
        text-align: left;
        font-size: 14px;
        background: #72af00;
        background: linear-gradient(-45deg, #72af00, #72af00);
        border-radius: 10px;
        color: #fff;
        line-height: 1.2;
        padding-top: 0;
        cursor: pointer;
        padding: 0 20px 15px 10px;
        transition:.35s all ease;
    }
    .addnew:hover {
        background: linear-gradient(-45deg, #fd9827, #ffc56b);
        transition:.35s all ease;
    }
    #btneadd {
        padding: 10px;
        height: 30px;
        display: inline-block;
        font-size: 20px;
    }
    .formgroup.imgcont {
        padding: 5px 10px;
    }
    p.discimg {
        font-size: 9px;
        text-align: left;
        color: #ccc;
        padding: 0 !important;
        width: 100%;
        float: left;
        margin: 0 !important;
    }
    .imagendiv .image-upload label {
        background: #dae6ea;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 1px 3px 10px #ccc;
        border: 3px solid #00b594;
    }
    .waiterror {
        color: red;
        font-weight: bold;
    }
    .formprod .inputerror {
        border: 2px solid #fd9797;
        border-radius: 8px;
    }
    #formhorarios .formgroup h4 {
        margin: 0;
        padding: 0;
        font-weight: bold;
        font-size: 15px;
        padding-top: 10px;
        text-align: left;
        width: 50%;
        padding-left: 10px;
        float: left;
    }
    .inicio, .fin {
        width: 50%;
        float: left;
        padding: 0 7.55px 20px;
    }
    #formhorarios .formgroup {
        width: 30%;
        float: left;
        text-align: left;
        font-weight: 500;
        color: #222;
        font-size: 12px;
        padding: 5px;
        border-radius: 16px;
        background: #eaeaea;
        margin: 1.33%;
    }
    .switch_box {
        display: inline-block;
        max-width: 50px;
        min-width: 50px;
        height: auto;
        float: none;
        display: inline-block;
    }
    /* Switch 1 Specific Styles Start */
    
    .disableday {
        background: #f5e0e0 !important;
    }
    .disableday .inicio, .disableday .fin {
        pointer-events: none;
        opacity: .6;
    }
    
    input[type="checkbox"].switch_1 {
        font-size: 22px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 50px;
        height: 25px;
        background: #ddd;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        min-height: 20px;
    }
      input[type="checkbox"].switch_1:checked{
        background: #72ac42;
      }
      input[type="checkbox"].switch_1::after {
        position: absolute;
        content: "";
        width: 33px;
        height: 33px;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
        box-shadow: 0 0 .25em rgba(0,0,0,.3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: -4.5px;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        top: -5px;
    }
    input[type="checkbox"].switch_1:checked::after {
        left: 20px;
    }
        
    /* Switch 1 Specific Style End */
    
    
    .switch {
        width: 50%;
        float: left;
        padding-top: 10px;
        text-align: right;
        padding-right: 10px;
        font-weight: 500;
        font-size: 11px;
    }
    .switch p {
        font-weight: 500;
        font-size: 11px;
        width: auto;
        float: none;
        /* text-align: right; */
        display: inline-block;
        padding: 5px;
        padding-right: 10px;
        transform: translateY(-7.5px);
    }
    .popUpHorarios .pocont {
        max-width: 1200px;
    }
    .fullcont {
        width: 100%;
        float: left;
        padding: 10px;
    }
    .fullcont #guardarmeta {
        max-width: 500px;
    }
    .timeselector {
        width: 120px;
    }
    .timeselector-item {
        width: 53.50px;
    }
    .timeselector-button {
        background: #fff;
        padding: 7px 7px;
    }
    #respuestadelete {
        width: 100%;
        position: fixed;
        bottom: -250px;
        left: 0;
        text-align: center;
        background: rgba(4, 64, 61, 0.9);
        padding: 20px 20px 10px;
        z-index: 9999;
        box-shadow: 1px 3px 14px #ccc;
        transition: 1s all ease;
    }
    #respuestadelete.openresp {
        bottom: 0px;
        transition:1s all ease;
    }
    #listamods {
        width: 100%;
        float: left;
        padding: 15px;
        border-radius: 16px;
        background: #f8f8f8;
        margin-top: 20px;
    }
    #listamods .platillo {
        width: 22%;
        float: left;
        border-radius: 8px;
        background: #e3e3e3;
        margin: 0 1.5% 30px;
        padding: 10px 10px 15px;
        color: #000;
        font-weight: bold;
        font-size: 15px;
        box-shadow: 1px 2px 8px #d2d2d2;
        border: 1px solid #e2e2e2;
    }
    .borrabtn {
        cursor: pointer;
    }
    #listamods .platillo p {
        font-weight: 500;
        font-size: 12px;
        padding: 10px;
        margin: 0;
        padding-top: 0;
        padding: 10px;
    }
    #addmodcont {
        width: 100%;
        float: left;
        padding: 10px;
        color: #222;
        font-weight: 500;
    }
    #listamods .borrabtn {
        position: absolute;
        right: 0;
        background: #fff;
        padding: 2.5px;
        border-radius: 50%;
        box-shadow: 1px 2px 6px #ccc;
        bottom: -8px;
        width: 30px;
        height: 30px;
    }
    #listamods .platillo {
        position: relative;
    }
    .imgprod {
        padding-top: 0;
        background-color: #e6e6e6;
        margin-bottom: 15px;
    }
        
    </style>