﻿
.contOpcion .perfilUsuario .principal {
    display: grid;
    align-items: center;
    margin-top: 20px;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "tb1";
}
.contOpcion .perfilUsuario .principal .tb1 {
    grid-area: tb1;
}
.contOpcion .perfilUsuario .CssTabL {
    color: rgb(255, 255, 255);
    border-radius: 10px 0px 0px 0px;
    overflow: hidden;
    background-color: #222222;
    color: white;
    width:250px;
}
.contOpcion .perfilUsuario .CssTabC {
    color: rgb(255, 255, 255);
    border-radius: 0px 0px 0px 0px;
    overflow: hidden;
    background-color: #222222;
    color: white;
    width: 250px;
}
.contOpcion .perfilUsuario .CssTabR {
    color: rgb(255, 255, 255);
    border-radius: 0px 10px 0px 0px;
    overflow: hidden;
    background-color: #222222;
    /*background: linear-gradient(#3c3b3b,#0d0d0d );*/
    color: white;
    width: 250px;
}
.contOpcion .perfilUsuario .SelectTab {
    background-color: #1e1343;
}
.contOpcion .perfilUsuario .DisabledTab {
    background-color: #3c3b3b;
    color: gray;
}
.contOpcion .perfilUsuario .HoveredTab {
    filter: brightness(150%);
}
.contOpcion .perfilUsuario .principal .tb1 .perfil {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin-top: 0px;
    grid-gap: 10px;
    border: 2px solid #1e1343;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.377);
    color: rgb(255, 255, 255);
    border-radius: 0px 0px 10px 10px;
}
.contOpcion .perfilUsuario .principal .etEnc {
    color: white;
    height: 40px;
    background-color: #25a0da;
    border-bottom: 2px solid #1e1343;
    border-top: 0px solid #1e1343;
    padding: 8px;
}
.contOpcion .perfilUsuario .principal .etEnc2 {
    color: white;
    height: 40px;
    background-color: #25a0da;
    border-bottom: 2px solid #1e1343;
    border-top: 2px solid #1e1343;
    padding: 8px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-column-gap: 5px;
    grid-template-columns: 1fr 1fr 10px 1fr 10px 1fr 15px;
    grid-template-rows: 40px  repeat(30px, 4);
    grid-template-areas:
        "et1    et1    et1    et1    et1     et1     et1"
        "lbl1   lbl1   lbl1   lbl2   lbl2    lbl3    lbl3"
        "txt1   txt1   val1   txt2   val2    txt3    val3"
        "lbl4   lbl4   lbl4   lbl5   lbl5    lbl6    lbl6"
        "txt4   txt4   val4   txt5   val5    txt6    val6";
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .et1 {
     grid-area: et1;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl1 {
    grid-area: lbl1;
    margin-left: 10px;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl2 {
    grid-area: lbl2;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl3 {
    grid-area: lbl3;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl4 {
    grid-area: lbl4;
    margin-left: 10px;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl5 {
    grid-area: lbl5;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl6 {
    grid-area: lbl6;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt1 {
    grid-area: txt1;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt2 {
     grid-area: txt2;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt3 {
    grid-area: txt3;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt4 {
    grid-area: txt4;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt5 {
    grid-area: txt5;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt6 {
    grid-area: txt6;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val1 {
    grid-area: val1;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val2 {
    grid-area: val2;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val3 {
    grid-area: val3;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val4 {
    grid-area: val4;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val5 {
    grid-area: val5;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .val6 {
    grid-area: val6;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-column-gap: 5px;
    grid-template-columns: 1fr 10px 1fr 10px;
    grid-template-rows: 40px repeat(30px, 4);
    grid-template-areas:
        "et1    et1    et1    et1"
        "lbl1   lbl1   lbl2   lbl2"
        "txt1   val1   txt2   val2"
        "lbl3   lbl3   lbl4   lbl4"
        "txt3   val3   txt4   val4";
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .et1 {
     grid-area: et1;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl1 {
     grid-area: lbl1;   
     margin-left: 10px;
     margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl2 {
    grid-area: lbl2;
    margin-left: -10px;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl3 {
    grid-area: lbl3;
    margin-left: 10px;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl4 {
    grid-area: lbl4;
    margin-left: -10px;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt1 {
    grid-area: txt1;
    margin-left: 10px;
    margin-right: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt2 {
    grid-area: txt2;
    margin-left: -10px;
    margin-right: 5px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt3 {
    grid-area: txt3;
    margin-left: 10px;
    margin-right: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt4 {
    grid-area: txt4;
    margin-left: -10px;
    margin-right: 5px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-column-gap: 5px;
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 15px;
    grid-template-rows: 40px repeat(30px, 4);
    grid-template-areas:
        "et1    et1    et1    et1    et1     et1     et1     et1"
        "lbl1   lbl1   lbl2   lbl2   lbl3    lbl3    lbl4    lbl4"
        "txt1   val1   txt2   val2   txt3    val3    txt4    val4"
        "lbl5   lbl5   lbl6   lbl6   lbl7    lbl7    lbl8    lbl8"
        "txt5   val5   txt6   val6   txt7    val7    txt8    val8";
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .et1 {
     grid-area: et1;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl1 {
     grid-area: lbl1; 
     margin-left: 10px;
     margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl2 {
     grid-area: lbl2;
     margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl3 {
     grid-area: lbl3;   
     margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl4 {
     grid-area: lbl4;
     margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl5 {
    grid-area: lbl5;
    margin-left: 10px;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl6 {
    grid-area: lbl6;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl7 {
    grid-area: lbl7;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl8 {
    grid-area: lbl8;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt1 {
     grid-area: txt1;
     margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt2 {
     grid-area: txt2;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt3 {
    grid-area: txt3;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt4 {
    grid-area: txt4;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt5 {
    grid-area: txt5;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt6 {
    grid-area: txt6;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt7 {
    grid-area: txt7;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt8 {
    grid-area: txt8;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val1 {
    grid-area: val1;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val2 {
    grid-area: val2;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val3 {
    grid-area: val3;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val4 {
    grid-area: val4;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val5 {
    grid-area: val5;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val6 {
    grid-area: val6;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val7 {
    grid-area: val7;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .val8 {
    grid-area: val8;
    margin-left: -2px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 40px repeat(30px, 2);
    grid-template-areas:
        "et1    et1    et1 "
        "lbl1   lbl2   lbl3  "
        "txt1   txt2   txt3  ";
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .et1 {
    grid-area: et1;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl1 {
    grid-area: lbl1;
    margin-left: 10px;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl2 {
    grid-area: lbl2;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl3 {
    grid-area: lbl3;
    margin-top:10px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt1 {
    grid-area: txt1;
    margin-left: 10px;
    margin-bottom: 20px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt2 {
    grid-area: txt2;
    margin-bottom: 20px;
}
.contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt3 {
    grid-area: txt3;
    margin-bottom: 20px;
    margin-right:20px;
}
.contOpcion .perfilUsuario .principal .tb1 .acciones {
    display: grid;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
    grid-gap: 20px;
    grid-row-gap: 10px;
    grid-template-columns:  repeat(1fr, 3);
    grid-template-areas:
        "esp1    btn1 	esp2";
    width: 100%;
}
.contOpcion .perfilUsuario .principal .tb1 .acciones .btn1{
   grid-area: btn1;
   display:flex;
   justify-content:center;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    grid-gap: 10px;
    border: 2px solid #1e1343;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.377);
    color: rgb(255, 255, 255);
    border-radius: 0px 0px 10px 10px;
    grid-template-columns: 1fr 20px;
    grid-template-rows: repeat(30px, 6);
    grid-template-areas:
        "lbl1    esp1"
        "txt1    val1"
        "lbl2    esp3"
        "txt2    val2"
        "lbl3    esp5"
        "txt3    val3";
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .lbl1 {
    grid-area: lbl1;
    margin-left: 10px;
    margin-top: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .lbl2 {
    grid-area: lbl2;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .lbl3 {
    grid-area: lbl3;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .txt1 {
    grid-area: txt1;
    max-width: 600px;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .txt2 {
    grid-area: txt2;
    max-width: 600px;
    margin-left: 10px;
}
.contOpcion .perfilUsuario .principal .tb1 .contraseña .txt3 {
    grid-area: txt3;
    max-width: 600px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.contOpcion .perfilUsuario .principal .tb1  .contraseña .val1 {
    grid-area: val1;
}
.contOpcion .perfilUsuario .principal .tb1  .contraseña .val2 {
    grid-area: val2;
}
.contOpcion .perfilUsuario .principal .tb1  .contraseña .val3 {
    grid-area: val3;
}

/*Responsive Design*/
/* 
smart wathch 320×320
xs   --  320px — 480px: Móviles -- H 320x480,  360x640, 480x320, 480x854
s    --  481px — 768px: iPads, Tablets -- H 480x320, 767x 480, 768x1024, 
m    --  769px — 1023px: Small screens, laptops -- H 800x600, 960x540
lg   --  1024px — 1299px: Desktops --H 1024x640, 1024x800, 1280x1024
xg   --  1300px en adelante —  Extra large -- 1600x900, 1920x1080
*/

/*Medida Default*/
/* con menu 1058px sin menu 869px (260px menu)*/
@media (max-width: 800px) {
    .contOpcion .perfilUsuario .CssTabL {
        width: 130px;
    }
    .contOpcion .perfilUsuario .CssTabC {
        width: 205px;
    }
    .contOpcion .perfilUsuario .CssTabR {
        width: 170px;
    }
}
/* con menu 872px sin menu 624px (260px menu)*/
@media (max-width: 614px) {
    .contOpcion .perfilUsuario .CssTabL {
        width: 70px;
    }
    .contOpcion .perfilUsuario .CssTabC {
        width: 120px;
    }

    .contOpcion .perfilUsuario .CssTabR {
        width:95px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto {
        grid-template-columns: 1fr 10px 1fr 15px;
        grid-template-rows:  40px repeat(30px, 6); 
        grid-template-areas:
            "et1    et1   et1   et1"
            "lbl1   lbl1  lbl2  lbl2"
            "txt1   val1  txt2   val2"
            "lbl3   lbl3  lbl4   lbl4"
            "txt3   val3  txt4   val4"
            "lbl5   lbl5  lbl6   lbl6"
            "txt5   val5  txt6   val6";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl3 {
        margin-top: 10px;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl4 {
        margin-top: 10px;
        margin-left: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt3 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt4 {
        margin-left: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio {
        grid-template-columns: 1fr 10px 1fr 15px;
        grid-template-rows: 40px repeat(30px, 8);
        grid-template-areas:
            "et1    et1    et1    et1"
            "lbl1   lbl1   lbl8   lbl8"
            "txt1   val1   txt8   val8"
            "lbl2   lbl2   lbl3   lbl3"
            "txt2   val2   txt3   val3"
            "lbl4   lbl4   lbl5   lbl5"
            "txt4   val4   txt5   val5"
            "lbl6   lbl6   lbl7   lbl7"
            "txt6   val6   txt7   val7";
    }
      .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl2 {
        margin-top: 10px;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl3 {
        margin-top: 10px;
        margin-left: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl4 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl5 {
        margin-left: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl6 {
         margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl8 {
        
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt2 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt4 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt5 {
        margin-left: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt6 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 40px repeat(30px, 4);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   txt1"
            "lbl2   lbl3"
            "txt2   txt3";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .etEnc2 {
        height: 70px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl1 {
        grid-area: lbl1;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl2 {
        margin-left: 10px;
        margin-top:10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl3 {
        grid-area: lbl3;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt1 {
        margin-bottom: 0px;
        margin-right: 20px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt2 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt3 {
        margin-bottom: 20px;
        margin-right:20px;
    }
}
/* con menu 617px sin menu 352px (260px menu)*/
@media (max-width: 550px) {
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto {
        grid-template-columns: 1fr 15px;
        grid-template-rows: 40px repeat(30px, 12);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   val1"
            "lbl2   lbl2"
            "txt2   val2"
            "lbl3   lbl3"
            "txt3   val3"
            "lbl4   lbl4"
            "txt4   val4"
            "lbl5   lbl5"
            "txt5   val5"
            "lbl6   lbl6"
            "txt6   val6";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl2 {
        margin-top: 10px;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl4 {
        margin-top: 10px;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .lbl6 {
        margin-top: 10px;
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt2 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt4 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .contacto .txt6 {
        margin-left: 10px;
    }
}
/* con menu 483px sin menu 215px (260px menu)*/
@media (max-width: 416px) {
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal {
        grid-template-columns: 1fr 10px;
        grid-template-rows: 40px repeat(30px, 6);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   val1"
            "lbl2   lbl2"
            "txt2   val2"
            "lbl3   lbl3"
            "txt3   val3"
            "lbl4   lbl4"
            "txt4   val4";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl2 {
        margin-left: 10px;
        margin-top:10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl3 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl4 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt1 {
        margin-left: 10px;
        margin-right: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt2 {
        margin-left: 10px;
        margin-right: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt3 {
        margin-right: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt4 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio {
        grid-template-columns: 1fr 15px;
        grid-template-rows: 40px repeat(30px, 16);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   val1"
            "lbl2   lbl2"
            "txt2   val2"
            "lbl3   lbl3"
            "txt3   val3"
            "lbl4   lbl4"
            "txt4   val4"
            "lbl5   lbl5"
            "txt5   val5"
            "lbl6   lbl6"
            "txt6   val6"
            "lbl7   lbl7"
            "txt7   val7"
            "lbl8   lbl8"
            "txt8   val8";
    }
     .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl3 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl4 {
        margin-top:10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl7 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl8 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt3 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt7 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt8 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
        grid-template-columns: 1fr;
        grid-template-rows: 60px repeat(30px, 6);
        grid-template-areas:
            "et1"
            "lbl1"
            "txt1"
            "lbl2"
            "txt2"
            "lbl3"
            "txt3";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl3 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt1 {
        margin-bottom: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt2 {
        margin-bottom: 0px;
        margin-right: 20px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt3 {
        margin-left: 10px;
        margin-top: 0px;
    }
}
/* con menu 416px sin menu 215px (260px menu)*/
@media (max-width: 352px) {
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
        grid-template-rows: 80px repeat(30px, 6);
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .etEnc2 {
        height: 90px;
    }
    .contOpcion .perfilUsuario .CssTabL {
        width: 70px;
        margin-left: -10px;
    }
    .contOpcion .perfilUsuario .CssTabC {
        width: 150px;
    }
    .contOpcion .perfilUsuario .CssTabR {
        width: 95px;
        margin-left: -30px;
    }
}
@media (max-width: 320px) {
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal {
        grid-template-columns: 1fr 10px;
        grid-template-rows: 40px repeat(30px, 6);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   val1"
            "lbl2   lbl2"
            "txt2   val2"
            "lbl3   lbl3"
            "txt3   val3"
            "lbl4   lbl4"
            "txt4   val4";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl2 {
        margin-left: 10px;
        margin-top:10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl3 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .lbl4 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt1 {
        margin-left: 10px;
        margin-right: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt2 {
        margin-left: 10px;
        margin-right: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt3 {
        margin-right: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .personal .txt4 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio {
        grid-template-columns: 1fr 15px;
        grid-template-rows: 40px repeat(30px, 16);
        grid-template-areas:
            "et1    et1"
            "lbl1   lbl1"
            "txt1   val1"
            "lbl2   lbl2"
            "txt2   val2"
            "lbl3   lbl3"
            "txt3   val3"
            "lbl4   lbl4"
            "txt4   val4"
            "lbl5   lbl5"
            "txt5   val5"
            "lbl6   lbl6"
            "txt6   val6"
            "lbl7   lbl7"
            "txt7   val7"
            "lbl8   lbl8"
            "txt8   val8";
    }
     .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl3 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl4 {
        margin-top:10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl7 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .lbl8 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt3 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt5 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt7 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .domicilio .txt8 {
        margin-left: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
        grid-template-columns: 1fr;
        grid-template-rows: 60px repeat(30px, 6);
        grid-template-areas:
            "et1"
            "lbl1"
            "txt1"
            "lbl2"
            "txt2"
            "lbl3"
            "txt3";
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .lbl3 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt1 {
        margin-bottom: 5px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt2 {
        margin-bottom: 0px;
        margin-right: 20px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .txt3 {
        margin-left: 10px;
        margin-top: 0px;
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios {
        grid-template-rows: 80px repeat(30px, 6);
    }
    .contOpcion .perfilUsuario .principal .tb1 .perfil .bancarios .etEnc2 {
        height: 90px;
    }
    .contOpcion .perfilUsuario .CssTabL {
        width: 70px;
        margin-left: -10px;
    }
    .contOpcion .perfilUsuario .CssTabC {
        width: 150px;
    }
    .contOpcion .perfilUsuario .CssTabR {
        width: 95px;
        margin-left: -30px;
    }
}