main { display: grid; grid-template-areas: 'bg-main datos' 'bg-main intereses'; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; justify-content: start; align-content: start; }
.btns { display: none; }

.bg-main { background: var(--mainBGSub); background-size: contain; grid-area: bg-main; }
.datos { grid-area: datos; }
.tooltip-inner { max-width: 250px; }
.foto { width: 240px; height: 200px; padding: 0 20px; }
.foto > img { width: 200px; min-width: 200px; max-width: 200px; height: 200px; min-height: 200px; max-height: 200px; }
.divIconsFoto { bottom: 0px; right: 20px; width: 200px; background: var(--claro-75); padding: 0.15em 0;  }
.iconFoto { width: 34px; height: 34px; border-radius: 50%; background: var(--mainColor-50); font-size: 1.25rem; color: var(--azul2); cursor: pointer; }
.iconFoto:hover { background: var(--mainColor); color: var(--white); }
.carga { display: none; }
.cif-file-container { height: 200px; max-height: 200px; }
.cif-file-container.cif-container-image-type .cif-file-row, .cif-file-container.cif-container-image-type .cif-parent { padding: 0; border: 0; text-align: center; }
.cif-img { height: 200px; max-height: 200px; width: 200px; max-width: 200px; object-fit: cover; border: 3px solid var(--mainColor); }
.alert-dismissible .close { font-size: 1em; }
.alert-dismissible .close:hover { color: inherit; }
.cif-file-picker.cif-pkr-archivo.is-invalid { border-color: var(--danger); }
.cif-file-picker.cif-pkr-archivo.is-invalid > * { color: var(--danger) !important; }

.acercaTit { background: var(--dark); color: var(--white); font-family: 'indivisa-text-bold-italic'; }
#txtAcerca { max-width: calc(200px + 2rem); color: var(--white); }
#txtAcerca.editable { background: var(--white); color: var(--azul2); border: 1px solid var(--azul2); border-radius: 5px; font-weight: 300; vertical-align: middle; padding: 0.5rem; outline: 0;  }
#txtAcerca[placeholder]:empty:before { content: attr(placeholder); color: #555; }
#txtAcerca[placeholder]:empty:focus:before { content: ''; }
.btnCirc { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 16px; background: var(--claro-50); }

#divRedes { max-width: calc(200px + 2rem); }
.iconRedes { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border: 0; background: var(--dark); color: var(--white); border-radius: 50%; margin: 0.25rem; cursor: pointer; }
.iconRedes:hover { background: var(--white); color: var(--dark); }
.iconRedes:focus, .iconRedes:active { outline: 0; background: var(--azul2); color: var(--white) !important; }
.popover { background: var(--white); border-color: var(--azul2); }
.popover-header { background: var(--white); border-bottom: 0; text-align: center; position: relative; }
.popover-header:before { content: ''; position: absolute; left: 10%; bottom: 0; height: 1px; width: 80%; border-bottom: 1px solid var(--azul2); }
.popover-header > .ing-cancelar { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 0.5em; background: var(--danger); color: var(--white); cursor: pointer; }
.popover-header > .ing-cancelar:hover { border: 1px solid var(--danger); background: var(--white); color: var(--danger); }
.bs-popover-auto[x-placement^=top]>.arrow::before, .bs-popover-top>.arrow::before { border-top-color: var(--azul2); }
.bs-popover-auto[x-placement^=top]>.arrow::after, .bs-popover-top>.arrow::after { border-top-color: var(--white); }
.bs-popover-auto[x-placement^=bottom]>.arrow::before, .bs-popover-bottom>.arrow::before { border-bottom-color: var(--azul2);}
.bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after { border-bottom-color: var(--white); }
.bs-popover-auto[x-placement^=right]>.arrow::before, .bs-popover-right > .arrow::before { border-right-color: var(--azul2); }
.bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right > .arrow::after { border-right-color: var(--white); }
.bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left > .arrow::before { border-left-color: var(--azul2); }
.bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left > .arrow::after { border-left-color: var(--white); }
.popover-body ul { list-style: none; margin-bottom: 0; padding-inline-start: 2em; }
.popover-body ul > li:before { display: inline-block; margin-left: -2em; margin-right: 0.5em; content: '\25A0'; transform: translateY(-0.15em); color: var(--azul1); }
.popover-body ul > li, .popover-body ul > li > div { display: flex; justify-content: start; align-items: start; }
.popover-body ul > li { flex-direction: row; }
.popover-body ul > li > div { flex-direction: column; }
.popover-body ul > li > div > span { font-size: 0.75em; line-height: 1; color: var(--gray); margin-bottom: 0.5em; }
.titRed > span { background: var(--azul1); color: var(--white); width: 28px; height: 28px; border-radius: 14px; display: flex; justify-content: center; align-items: center; }
.titRed > label { position: relative; height: 28px; max-height: 28px; width: 100%; border-radius: 0 14px 14px 0; background: var(--azul1-75); color: var(--white); padding-left: 20px; display: flex; justify-content: start; align-items: center;  }
.titRed > label:after { content: ''; width: 14px; height: 28px; border-radius: 0 14px 14px 0; background: var(--white); position: absolute; top: 0; left: 0; }
.redes ul > li { border-bottom: 1px solid var(--mainColor-50); }
.redes ul > li:last-child { border-bottom: 0; }
.red > div > span { font-size: 0.75em; color: var(--gray); }
#modalSupRedes .modal-body { max-height: 600px; }

#nombre, #apellidos{ line-height: inherit; padding: 0 0.5rem !important; }
#nombre:disabled, #apellidos:disabled { display: none; }
#curp:disabled { border: 0; color: var(--azul2); }
.tooltip-inner { background: var(--azul2); }
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: var(--azul2); }

section > div { margin-bottom: 1.5rem; }
section > div > div.num { text-align: center; letter-spacing: 2px; color: var(--white); padding: 0.25em 0.5em; min-width: 100px; width: 100px; margin-right: 1em; background: var(--mainColor); }
section > div:first-of-type > div.num { background: var(--azul1); }
.bordeInfInteres { border-bottom: 1px solid var(--gray-25); }
#eliminaIntereses { display: none; }
.intereses { grid-area: intereses; }
.intereses > .bordeInf { border-bottom: 2px solid var(--mainColor); }

.intereses ul, .redes ul { list-style: none; padding-inline-start: 1em; }
.intereses ul > li, .redes ul > li { padding: 0.5em; }
.interes > .flex-grow-1, .red > .flex-grow-1 { line-height: 1; }
.interes > .ing-cuadrado { font-size: 0.5em; margin-top: 0.5em; }
.interes > .ing-cancelar, .red > .ing-cancelar { font-size: 0.75em; margin-top: 0.25em; }
.interes > .ing-cuadrado, .interes > .ing-cancelar, .red > .ing-cancelar { margin-right: 5px; }
.interes > .ing-basura, .interes > .ing-cancelar, .red > .ing-basura, .red > .ing-cancelar { color: var(--danger); cursor: pointer; }
.interes > .ing-basura, .interes > .ing-cancelar, .red > .ing-cancelar{ display: none; }
/*.intereses ul > li:before { display: inline-block; margin-left: -2em; margin-right: 0.5em; content: '\25A0'; transform: translateY(-0.15em); }
.intereses ul:nth-child(odd) > li:before { color: var(--azul1); }
.intereses ul:nth-child(even) > li:before { color: var(--azul2); }*/

.borrar, .hoverElim  { background: var(--danger-25); }

@media (max-width: 576px) {
    main {grid-template-areas: 'datos' 'bg-main' 'intereses'}
    .txtAcerca { max-width: 100%; }
    .bordeDer { border-right: 0; }
}