/* Styles by dgmarianaperez oct•2025 */

body {color:#222; font-family: 'TWK Everett', Arial, Helvetica, sans-serif; font-weight: 300; font-style: normal;}

/*
font-weight: 100; = thin
font-weight: 300; = light
font-weight: 400 / normal; = regular
font-weight: 500; = medium
*/
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 20}

:root {
    /* oficiales
--colRojo: #E76957;  |  rgb(231, 105, 87)
--colMostaza: #E8A464; | rgb(232, 164, 100)
--colVerdeSeco: #848C64; | rgb(132, 140, 100)
oscuros
--colRojo: #E4422B;  |  rgb(231, 105, 87)
--colMostaza: #DD7D22; | rgb(232, 164, 100)
--colVerdeSeco: #58632D
    */
--colRojo: #E76957; 
--colMostaza: #E8A464;
--colVerdeSeco: #848C64;
--colGris: #98989A;
--colRojoHov: #E4422B;
--colMostazaHov: #DD7D22;
--colVerdeSecoHov: #58632D;
}

.color-box {display: inline-block; width: 30px; height: 20px; border-radius: 2px; color:rgb(231, 105, 87)}
.color-loft { background-color: var(--colRojo); mix-blend-mode: multiply;}
.color-1-hab { background-color: var(--colMostaza); mix-blend-mode: multiply;}
.color-2-habs { background-color: var(--colVerdeSeco); mix-blend-mode: multiply; }
.color-box.red, .color-loft:hover, .color-loft.selected { background-color: var(--colRojoHov); mix-blend-mode: multiply;}
.color-box.yellow, .color-1-hab:hover, .color-1-hab.selected { background-color: var(--colMostazaHov); mix-blend-mode: multiply;}
.color-box.green, .color-2-habs:hover, .color-2-habs.selected { background-color: var(--colVerdeSecoHov); mix-blend-mode: multiply;}
.color-box.gris { background-color: var(--colGris);}
.text-color-loft { color: var(--colRojo) !important; }
.text-color-1-hab { color: var(--colMostaza) !important; }
.text-color-2-habs { color: var(--colVerdeSeco) !important; }
.text-color-bloqueada { color: var(--colGris) !important; }
.bloqueada {background-color: rgba(204, 204, 204, 1); mix-blend-mode: multiply; cursor: not-allowed;}
.bloqueada:hover, .bloqueada.selected { background-color: transparent;}
.bloqueadaCol {background-color: var(--colGris)}

.frente {background: url(img/vista-frente-line.png) no-repeat top center; background-size: contain;}
.posterior {background: url(img/vista-posterior-line.png) no-repeat top center; background-size: contain;}

.apartment-grid {font-weight: normal; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; width: 80%; margin-left: 10%; padding-top: 19px; padding-bottom: 7px; margin-bottom: 20px;}
.apartment-grid {color: #A39383}
.posterior .apartment-grid {padding-top: 19px;}

.apartment-btn {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.848;
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 0; color: transparent; font-weight: bold; font-size: 0.8em;
}
.ap-btn-doble {grid-column: span 2; aspect-ratio: 1 / 0.42;}
.apartment-btn:hover {transform: scale(1.05); z-index: 10;}
.apartment-btn.selected {box-shadow: 0 0 4px rgba(75, 75, 75, 0.5);}
.building-view h6 {margin-top: 4rem; margin-bottom: 0;}


/* Card o ficha informativa */
.info-card .display-1 {font-size: 3.72rem; font-weight: 100; transition: color 0.3s ease;}
.legend {padding-top: 10px;}
.legend-item { display: flex; align-items: center; gap: 20px; font-size: 0.9em; margin-bottom: 8px;}
#info-nivel, #info-tipo, .rowLevel p, .legend-item {font-weight: normal; font-weight: normal; text-transform: uppercase !important; font-size: 0.8rem;}
#info-vista, .rowInfoIcons .text-muted {text-transform: uppercase !important; font-size: 1.22rem;}
#info-precio {font-size: 1.6rem; font-weight: 300; padding: 12px 12px 8px;}

.rowInfoIcons {padding: 6px 0;}
.wBordeLeft {border-left: solid 2px rgba(0,0,0,0.1);}
.rowInfoIcons .col {display: flex; align-items: center; gap: 8px;}

.btn-outline {position: relative ;color: #757d59; font-weight: 500; border: solid 1px #757d59; border-radius: 4px; width: 100%; padding: 16px;}
.btn-outline:hover {box-shadow: 0 0 4px rgba(75, 75, 75, 0.5);}
.btn-outline span {position: absolute; right: 20px;}
.text-color-loft .btn-outline { color: #E76957; border: solid 1px #E76957;}
.text-color-1-hab .btn-outline { color: #E8A464 !important; border: solid 1px #E8A464;}
.text-color-2-habs .btn-outline { color: #848C64 !important; border: solid 1px #848C64;}