/* ═══════════════════════════════════════════
   iProp.ar — Badge RETASADO + Badge OFERTA
   Cintas diagonales 45° en la esquina
   superior derecha de cards y fichas.
   RETASADO ocupa la banda superior (top:30px card / 42px ficha)
   OFERTA  ocupa la banda secundaria justo debajo (pegado)
   Ambos conviven: retasado arriba, oferta debajo,
   encastrados sin superposición.
   ═══════════════════════════════════════════ */

/* 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 superior - naranja */
.prop-badge-retasado {
    position: absolute !important;
    display: block !important;
    width: 200px !important;
    height: 28px !important;
    padding: 4px 0 !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    text-align: center !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.4 !important;
    transform: rotate(45deg) !important;
    right: -50px !important;
    left: auto !important;
    top: 30px !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: 2 !important;
}

/* Cinta OFERTA: banda diagonal secundaria - rojo/amarillo, pegada abajo del retasado
   top:56px = top retasado (30px) + altura retasado (≈26px tras rotación) + gap mínimo 0px */
.prop-badge-oferta {
    position: absolute !important;
    display: block !important;
    width: 200px !important;
    height: 20px !important;
    padding: 3px 0 !important;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #fde047 !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    transform: rotate(45deg) !important;
    right: -50px !important;
    left: auto !important;
    top: 56px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !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: 1 !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-retasado {
    width: 270px !important;
    top: 42px !important;
    right: -68px !important;
    left: auto !important;
    height: 32px !important;
    font-size: 0.82rem !important;
    padding: 5px 0 !important;
}
.prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
    width: 270px !important;
    top: 76px !important;
    right: -68px !important;
    left: auto !important;
    height: 24px !important;
    font-size: 0.76rem !important;
    padding: 4px 0 !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-retasado {
    right: -50px !important;
    left: auto !important;
    top: 30px !important;
    height: 28px !important;
}
.ratio > .prop-badge-retasado-ctn .prop-badge-oferta {
    right: -50px !important;
    left: auto !important;
    top: 56px !important;
    height: 20px !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-retasado {
    right: -68px !important;
    top: 42px !important;
    height: 32px !important;
}
.ratio > .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
    right: -68px !important;
    top: 76px !important;
    height: 24px !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-retasado {
        width: 170px !important;
        height: 24px !important;
        font-size: 0.68rem !important;
        top: 24px !important;
        right: -42px !important;
        left: auto !important;
        padding: 3px 0 !important;
    }
    .prop-badge-oferta {
        width: 170px !important;
        height: 18px !important;
        font-size: 0.64rem !important;
        top: 48px !important;
        right: -42px !important;
        left: auto !important;
        padding: 2px 0 !important;
    }
    .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-retasado {
        width: 230px !important;
        top: 34px !important;
        right: -58px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    .prop-badge-retasado-ctn.prop-badge-retasado-ficha .prop-badge-oferta {
        width: 230px !important;
        top: 62px !important;
        right: -58px !important;
        height: 21px !important;
        font-size: 0.70rem !important;
    }
}