/* =============================================================================
   OPEN360 para Auto360
   Insignia + aviso en la tarjeta del listado y en la ficha del auto.
   ============================================================================= */

/* --- El marco de la letra (a/b/c) no debe mostrar "OPEN 360" --------------
   La tarjeta de Vehica genera el marco con la clase del slug del término. Como
   la etiqueta vive en esa misma taxonomía, sin esto saldría "OPEN 360" dentro
   del recuadro de la letra y descuadraría el diseño.
   -------------------------------------------------------------------------- */
.vehica-car-card__category-ribbon--open-360,
.vehica-car-card__category-ribbon--open360,
.vehica-car-card__category-ribbon--open_360 {
    display: none !important;
}

/* --- Insignia sobre la imagen (el marco de categoría va arriba-izquierda) --- */
.open360-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    background: #eb5717;
    color: #fff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    padding: 7px 11px;
    border-bottom-left-radius: 6px;
    pointer-events: none;
}

/* --- Caja de aviso (común) --- */
.open360-notice {
    background: #fef3ee;
    border-left: 3px solid #eb5717;
    border-radius: 4px;
    padding: 9px 11px;
    margin: 12px 0 0;
    text-align: left;
}

.open360-notice__head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #eb5717;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.open360-notice__head i {
    font-size: .95em;
}

.open360-notice__text {
    margin: 5px 0 0;
    color: #6b7280;
    line-height: 1.45;
}

/* --- Variante tarjeta: pegada al borde inferior, 2 líneas, desplegable -----
   El contenido de la tarjeta de Vehica tiene padding 0 22px 19px: los márgenes
   negativos lo anulan para que el aviso llegue a ras de los bordes. El .inner
   ya tiene overflow:hidden y radius 12px, así que recorta las esquinas.

   position + z-index son IMPRESCINDIBLES: Vehica superpone un enlace a la ficha
   sobre toda la tarjeta (.vehica-car-card-link, z-index:10). Sin esto el clic
   navega al auto en vez de desplegar el aviso.
   -------------------------------------------------------------------------- */
.open360-notice--card {
    position: relative;
    z-index: 11;
    margin: 14px -22px -19px;
    padding: 9px 14px 10px;
    border-left: 0;
    border-top: 1px solid rgba(235, 87, 23, .22);
    border-radius: 0 0 12px 12px;
    cursor: pointer;
    transition: background-color .18s ease;
}

.open360-notice--card:hover {
    background: #fdeae1;
}

.open360-notice--card:focus-visible {
    outline: 2px solid #eb5717;
    outline-offset: -2px;
}

.open360-notice--card .open360-notice__head {
    font-size: 11px;
}

/* Flecha indicadora: gira al desplegar */
.open360-notice__chevron {
    margin-left: auto;
    font-size: 9px;
    transition: transform .2s ease;
}

.open360-notice--card.is-expanded .open360-notice__chevron {
    transform: rotate(180deg);
}

/* Plegado: exactamente 2 líneas */
.open360-notice--card .open360-notice__text {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desplegado: texto completo */
.open360-notice--card.is-expanded .open360-notice__text {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* --- Variante ficha del auto: más legible --- */
.open360-notice--single {
    padding: 14px 16px;
    margin: 14px 0 18px;
}

.open360-notice--single .open360-notice__head {
    font-size: 14px;
}

.open360-notice--single .open360-notice__text {
    font-size: 13.5px;
    color: #111827;
}