/* ═══════════════════════════════════════════
   iProp.ar — Badge RETASADO + Badge OFERTA
   Cintas diagonales 45° en la esquina
   superior derecha de cards y fichas.
   RETASADO ocupa la banda superior (top:32px card / 44px ficha)
   OFERTA  ocupa la banda secundaria, separada de retasado
   (la cinta de oferta tienen leyenda personalizable: properties.oferta_leyenda)
   ═══════════════════════════════════════════ */

/* Contenedor compartido: anclaje absoluto a la esquina superior derecha.
   Usamos !important en width/height/top/right/left para prevalecer
   sobre reglas de padres como Bootstrap .ratio > * (position absolute width:100% height:100%). */
.prop-badge-retasado-ctn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 130px !important;
    height: 130px !important;
    overflow: hidden;
    pointer-events: none;
    z-index: 6 !important;
    direction: ltr;
}

/* Cinta RETASADO: banda diagonal secundaria - naranja, ahora debajo de oferta */
.prop-badge-retasado {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 28px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transform: rotate(45deg) !important;
    right: -52px !important;
    left: auto !important;
    top: 32px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    z-index: 4 !important;
}

/* Cinta OFERTA: banda diagonal primaria - rojo/amarillo, ahora arriba */
.prop-badge-oferta {
    position: absolute !important;
    display: block !important;
    width: 220px !important;
    height: 28px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #fde047 !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    line-height: 28px !important;
    text-align: center !important;
    text-indent: -25px !important;
    transform: rotate(45deg) translateY(-3px) !important;
    right: -50px !important;
    left: auto !important;
    top: 68px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    border-top: 1px solid rgba(253, 224, 71, 0.35) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    z-index: 3 !important;
}

/* Ficha: contenedor más grande (hero) */
.prop-badge-retasado-ctn.prop-badge-retasado-ficha {
    width: 180px !important;
    height: 180px !important;
    z-index: 20 !important;
    right: 0 !important;
}
.prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
    width: 300px !important;
    top: 88px !important;
    right: -78px !important;
    left: auto !important;
    height: 32px !important;
    font-size: 0.90rem !important;
    padding: 0 !important;
    display: block !important;
    line-height: 32px !important;
    text-align: center !important;
    text-indent: -25px !important;
    transform: rotate(45deg) translateY(-3px) !important;
}
.prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-retasado {
    width: 270px !important;
    top: 44px !important;
    right: -65px !important;
    left: auto !important;
    height: 32px !important;
    font-size: 0.82rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Chip inline para CRM (sin posicionamiento absoluto) */
.prop-badge-retasado-inline {
    display: inline-block;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}
.prop-badge-oferta-inline {
    display: inline-block;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #fde047;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
}

/* Override explícito para contenedores Bootstrap .ratio (cards semejantes, etc.)
   Aplica mismas posiciones dentro del contexto .ratio > * */
.ratio > .prop-badge-retasado-ctn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 130px !important;
    height: 130px !important;
}
.ratio > .prop-badge-retasado-ctn .prop-badge-oferta {
    right: -50px !important;
    left: auto !important;
    top: 68px !important;
    height: 28px !important;
}
.ratio > .prop-badge-retasado-ctn .prop-badge-retasado {
    right: -52px !important;
    left: auto !important;
    top: 32px !important;
    height: 28px !important;
}
.ratio > .prop-badge-retasado-ctn.prop-badge-retasado-ficha {
    width: 180px !important;
    height: 180px !important;
    right: 0 !important;
}
.ratio > .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
    right: -78px !important;
    top: 88px !important;
    height: 32px !important;
}
.ratio > .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-retasado {
    right: -65px !important;
    top: 44px !important;
    height: 32px !important;
}

/* Responsive mobile */
@media (max-width: 575px) {
    .prop-badge-retasado-ctn {
        width: 110px !important;
        height: 110px !important;
    }
    .prop-badge-retasado-ctn.prop-badge-retasado-ficha {
        width: 150px !important;
        height: 150px !important;
    }
    .prop-badge-oferta {
        width: 190px !important;
        height: 24px !important;
        font-size: 0.72rem !important;
        top: 50px !important;
        right: -50px !important;
        left: auto !important;
        padding: 0 !important;
        display: block !important;
        line-height: 24px !important;
        text-align: center !important;
        text-indent: -20px !important;
        transform: rotate(45deg) translateY(-2px) !important;
    }
    .prop-badge-retasado {
        width: 170px !important;
        height: 24px !important;
        font-size: 0.68rem !important;
        top: 16px !important;
        right: -42px !important;
        left: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
        width: 260px !important;
        top: 62px !important;
        right: -68px !important;
        height: 28px !important;
        font-size: 0.80rem !important;
        padding: 0 !important;
        display: block !important;
        line-height: 28px !important;
        text-align: center !important;
        text-indent: -20px !important;
        transform: rotate(45deg) translateY(-2px) !important;
    }
    .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-retasado {
        width: 230px !important;
        top: 26px !important;
        right: -54px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}