@media (prefers-color-scheme: dark) {

    .gr_con_img_edit {
        border: 3px solid #000000 !important;
        /* outline: 1.8px solid rgba(63, 177, 162, .50) !important; */
    }

    .gr_titulo_opinion {
        color: #fff;
    }

    /* .gr_divider_opinion {
        background-color: rgba(63, 177, 162, 1) !important; 
    } */

    .gr_slot_editorialistas {
        border: 3px solid var(--color-fuerte-opinion) !important;
    }
}

.gr_titulo_opinion {
    font: 600 var(--font-size-t-division) / 1.2em var(--font-barlowcon);
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.6px;
}

.gr_slot_editorialistas {
    border-radius: 13px;
    /* border: 3px solid rgba(63, 177, 162, 1); */
    border: 3px solid var(--color-claro-opinion);
    container-type: inline-size;
    position: relative;
    /* padding: 17px 25px 15px 25px; */
    /* padding: 16px 15px 7px 15px; */
    padding: 18px 18px 10px 18px;
}

.gr_divider_opinion {
    height: 1px;
    background-color: var(--color-fuerte-opinion);
    margin-bottom: 10px;
}

.gr_con_editorialistas {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-gap: 30px 41px;
}

.gr_columna_edit {
    position: relative;
    grid-column: span 1;
    transition: opacity 0.5s ease-in-out;
}

.gr_slot_editorialistas[data-cols="4"] .gr_con_editorialistas {
    grid-template-columns: repeat(1, 1fr);
}

.gr_slot_editorialistas[data-cols="8"] .gr_con_editorialistas {
    grid-template-columns: repeat(2, 1fr);
}

.gr_slot_editorialistas[data-cols="12"] .gr_con_editorialistas {
    grid-template-columns: repeat(3, 1fr);
}

.gr_slot_editorialistas[data-cols="4"] .gr_con_editorialistas .gr_columna_edit>div:last-child {
    /* border-bottom: 0px solid rgb(var(--color-gray0)); */
    border-bottom: 0px solid #D3D7DE;
}

.gr_slot_editorialistas[data-cols="8"] .gr_con_editorialistas .gr_columna_edit>div:nth-child(5),
.gr_slot_editorialistas[data-cols="8"] .gr_con_editorialistas .gr_columna_edit>div:last-child {
    /* border-bottom: 0px solid rgb(var(--color-gray0)); */
    border-bottom: 0px solid #D3D7DE;
}

.gr_slot_editorialistas[data-cols="12"] .gr_con_editorialistas .gr_columna_edit>div:nth-child(5),
.gr_slot_editorialistas[data-cols="12"] .gr_con_editorialistas .gr_columna_edit>div:nth-child(10),
.gr_slot_editorialistas[data-cols="12"] .gr_con_editorialistas .gr_columna_edit>div:last-child {
    border-bottom: 0px solid #D3D7DE;
}

.gr_con_indiv_edit {
    display: flex;
    flex-direction: row;
    padding: 9px 0px;
    border-bottom: 0.6px solid #D3D7DE;
}

.gr_con_img_edit {
    border-radius: 50%;
    overflow: hidden;
    width: 66px;
    height: 66px;
    border: 3px solid #fff;
    /* outline: 1.8px solid rgba(63, 177, 162, 1); */
    outline: 1.8px solid var(--color-fuerte-opinion);
    margin-right: 12px;
    width: 100%;
    height: 66px;
    max-width: 66px;
    object-fit: cover;
}

.gr_img_edit {
    width: 100%;
}

.gr_info_edit {
    padding-top: 6px;
}

.gr_nombre_edit {
    /* color: #3FB1A2; */
    color: var(--color-fuerte-opinion);
    /* font: 400 11px / 120% var(--font-barlowcon); */
    /* font: 300 10px / 120% var(--font-barlowcon); */
    font: 400 var(--font-size-opinion-modulo-nombre) / 120% var(--font-barlowcon);
    text-transform: uppercase;
}

.gr_sec_edit {
    color: var(--color-gray1);
    font: 400 var(--font-size-seccion) / 120% var(--font-barlowcon);
    text-transform: uppercase;
}

.gr_titulo_edit {
    color: var(--color-gray4);
    font: 400 var(--font-size-opinion-titulo-nota) / 120% var(--font-barlowcon);
}

.divider_vertical_edit {
    width: .5px;
    height: 94%;
    /*CAMBIOS CORRECCIONES*/
    background-color: var(--color-gray-fix-opinion);
    position: absolute;
    top: 51%;
    right: -21px;
    transform: translateY(-50%);
}

.fade_in_opinion {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* Cuando se aplica la clase fade_in_opinion, la opacidad pasa a 1 */
.gr_columna_edit.fade_in_opinion {
    opacity: 1;
}

.gr_con_boton_opinion {
    display: flex;
    justify-content: center;
}

.gr_boton_opinionver {
    border-radius: 30px;
    /* color: #3fb1a2;
    border: 1.8px solid #3fb1a2; */
    color: var(--color-fuerte-opinion);
    border: var(--font-sb-border) solid var(--color-fuerte-opinion);
    /* font: 400 10px / 21 var(--font-barlowcon); */
    font: var(--font-sbp) var(--font-size-boton) / 2.1em var(--font-barlowcon);
    padding: 0px 15px 0px 15px;
    text-transform: uppercase;
    letter-spacing: 0.48px;
    height: 30px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 235px;
    cursor: pointer;
    margin-bottom: 12px;
}

.gr_con_boton_opinion_mas {
    width: 100%;
    justify-content: center;
    padding-bottom: 15px;
    display: none;
    padding-top: 0px;
    padding-bottom: 15px;
}

.gr_conopinion_boton_text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gr_con_boton_opinion_mas_solomov {
    display: none;
}

/*-----------------------------------*/
/*------ESTILOS PORTADA OPINIÓN------*/
/*-----------------------------------*/

.gr_slot_opi_mini .gr_con_indiv_edit {
    border-bottom: none;
    padding: 2px 0px 10px 2px;
    width: 100%;
}

/*-----------BUSCADOR OPINIÓN------------*/

.gr_buscador_opinion {
    grid-column: span 12;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #20242F;
    border-radius: 10px;
    padding: 20px;
}

.gr_descrip_buscador {
    font: 500 clamp(16px, 2.4vw, 24px) / 120% var(--font-barlowcon);
    color: #fff;
    width: 100%;
    margin-left: 1.7%;
    margin-right: 20px;
}

.gr_con_buscador_opi {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /*background-color: #fff;
    border-radius: 60px;*/
    width: 100%;
    /*max-width: 315px;*/
    gap: 8px;
}

.gr_input_buc_opi {
    flex: 1;
    /*font: 400 clamp(11px, 1.2vw, 12px) / 120% var(--font-barlowcon);*/
    padding-left: 23px;
    background-color: #ffffff00;
    /*SEGUNDOS AJUSTES OPINION*/
    border-radius: 50px;
    font: 400 13px / 120% var(--font-barlowcon);
    text-transform: uppercase;
}

.gr_input_buc_opi::placeholder {
    color: #ADB4C3;
    text-transform: uppercase;
}

.gr_submit_busc_opi {
    display: flex;
    align-items: center;
    background-color: #AFB4C2;
    color: #fff;
    /*width: 25px;
    height: 25px;*/
    height: 35px;
    border-radius: 50px;
    /*margin: 5px;*/
    padding: 0 30px;
    font: 600 13px / 120% var(--font-barlowcon);
    text-transform: uppercase;
}

.gr_icono_lupa_opi {
    margin: auto;
}

/*ESTILOS POR REVISAR*/
/* Contenedor relativo para posicionar el dropdown */
.autocomplete-wrap {
    position: relative;
    display: inline-block;
    /*width: 100%;*/
    background-color: #fff;
    border-radius: 50px;
    height: 35px;
    display: flex;
}

.autocomplete-list {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 240px;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    padding: 4px;
    display: none;
}

.autocomplete-wrap.open .autocomplete-list {
    display: block;
}

.autocomplete-list::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-list::-webkit-scrollbar-track {
    background: #F5F6F9;
    /* color del riel */
    border-radius: 8px;
}

.autocomplete-list::-webkit-scrollbar-thumb {
    background: #AFB4C2;
    /* color del pulgar */
    border-radius: 8px;
}

.autocomplete-list::-webkit-scrollbar-thumb:hover {
    background: #5C6673;
    /* color al pasar el mouse */
}

.autocomplete-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
    text-transform: uppercase;
    font: 400 14px / 120% var(--font-barlowcon);
    color: var(--color-gray4);
}

.autocomplete-item:hover,
.autocomplete-item[aria-selected="true"] {
    background: #f1f5f9;
}

.autocomplete-empty {
    padding: 10px;
    color: var(--color-gray4);
    font: 500 14px / 120% var(--font-barlowcon);
    cursor: default;
    text-transform: uppercase;
}

/* ---- FLECHA DROPDOWN (BOTÓN SVG) ---- */
/* deja espacio para la flecha dentro del input */
.gr_input_buc_opi {
    padding-right: 2rem;
}

.autocomplete-wrap {
    position: relative;
}

/* Botón-caret clickeable (sustituye a ::after) */
.autocomplete-caret {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #555;
    padding: 0;
    margin: 0;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Icono con mask (toma currentColor) */
.autocomplete-caret::before {
    content: "";
    display: block;
    width: 8px;
    height: 5.59px;
    margin: auto;
    background: url("../2025/img/flecha_cartones.svg") no-repeat center / contain;
    transition: transform .2s ease;
    pointer-events: none;
}

/* Gira cuando el dropdown está abierto (clase controlada por JS) */
.autocomplete-wrap.open .autocomplete-caret::before {
    transform: rotate(180deg);
}

/* Opcional: estados interactivos */
.autocomplete-caret:hover {
    color: #333;
}

.autocomplete-caret:active {
    transform: translateY(-50%) scale(0.96);
}

/* Accesibilidad: foco visible si se tabbea al botón (aunque lo tenemos tabindex -1 por defecto) */
.autocomplete-caret:focus-visible {
    outline: 2px solid #60a5fa;
    border-radius: 6px;
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce) {
    .autocomplete-caret::before {
        transition: none;
    }
}

/* --- (Opcional) Fallback sin mask: usa background-image fijo ---
.autocomplete-caret::before {
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M7 10l5 5 5-5' fill='%23555'/></svg>");
}
*/




@media (max-width: 920px) {
    .gr_boton_opinionver {
        max-width: 210px;
    }
}

@media (max-width: 800px) {
    .gr_boton_opinionver {
        max-width: 100%;
    }
}

@media (max-width:700px) {

    .gr_con_indiv_edit {
        /* height: 96px; */
        padding: 19px 0px;
    }

    .gr_slot_editorialistas {
        padding: 18px 10px 10px 10px;
    }

}

@media (max-width: 670px) {
    .gr_boton_opinionver {
        font: 400 8px / 21 var(--font-barlowcon);
    }

    /*-----------BUSCADOR OPINIÓN------------*/

    .gr_buscador_opinion {
        flex-direction: column;
        align-items: flex-start;
    }

    .gr_con_buscador_opi {
        max-width: 100%;
        justify-content: flex-start;
    }

    .gr_descrip_buscador {
        margin-left: 0;
        margin-bottom: 7px;
        font: 500 clamp(16px, 3.4vw, 24px) / 120% var(--font-barlowcon);
    }

    .autocomplete-wrap {
        flex: 1;
    }

    .gr_input_buc_opi {
        font: 400 clamp(11px, 1.2vw, 12px) / 120% var(--font-barlowcon);
    }

    .autocomplete-item {
        font: 400 12px / 120% var(--font-barlowcon);
    }

    .gr_submit_busc_opi {
        font: 600 clamp(11px, 1.2vw, 12px) / 120% var(--font-barlowcon);
        max-width: 90px;
        padding: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width:600px) {

    .gr_con_boton_opinion_mas_solodes {
        display: none;
    }

    .gr_con_boton_opinion_mas_solomov {
        display: flex;
    }

    .gr_titulo_opinion {
        padding: 0px 0px;
        font: 600 var(--font-size-t-division-iphone) / 1.2em var(--font-barlowcon) !important;
    }

    .gr_titulo_edit {
        /* font: 400 18px / 120% var(--font-barlowcon); */
        /* font: 400 21px / 120% var(--font-barlowcon); */
        font: 400 var(--font-size-opinion-titulo-nota-iphone) / 120% var(--font-barlowcon);
    }

    .gr_sec_edit {
        /* font: 300 12px / 120% var(--font-barlowcon); */
        /* font: 300 var(--font-size-seccion) / 120% var(--font-barlowcon); */
        font: 400 var(--font-size-seccion-iphone) / 120% var(--font-barlowcon);
    }

    .gr_nombre_edit {
        /* font: 300 11px / 120% var(--font-barlowcon); */
        font: 400 var(--font-size-opinion-modulo-nombre-iphone) / 120% var(--font-barlowcon);
    }

    .gr_con_editorialistas {
        grid-gap: 0px 0px;
    }

    .gr_slot_editorialistas {
        padding: 24px 18px 12px 18px;
    }

    .gr_slot_editorialistas[data-cols="8"] .gr_con_editorialistas {
        grid-template-columns: repeat(1, 1fr);
    }

    .gr_slot_editorialistas[data-cols="12"] .gr_con_editorialistas {
        grid-template-columns: repeat(1, 1fr);
    }

    .divider_vertical_edit {
        display: none;
    }


    .gr_con_editorialistas>div:nth-child(2),
    .gr_con_editorialistas>div:nth-child(3) {
        display: none;
    }

    .gr_boton_opinionver {
        /* font: 400 13px / 21 var(--font-barlowcon); */
        font: var(--font-sbp) var(--font-size-boton-iphone) / 2.1em var(--font-barlowcon);
        width: auto;
        height: 36px;
        padding-left: 15px;
        padding-right: 15px;
        border: var(--font-sb-border-r) solid var(--color-fuerte-opinion);
    }

    .gr_boton_opinion_mas {
        position: relative;
        right: -45%;
    }

    /*-----------------------------------*/
    /*------ESTILOS PORTADA OPINIÓN------*/
    /*-----------------------------------*/

    /*SEGUNDOS AJUSTES OPINION*/
    .gr_block_port_opi {
        border-bottom: 1px solid var(--color-divisiones);
            border-bottom: solid 2px var(--color-gray4);
    }

    .gr_slot_opi_mini.gr_primer_slot_mini {
        border-top: none !important;
    }

    .gr_slot_opi_mini {
        flex-direction: column;
    }

    .gr_slot_opi_mini .gr_caja_texto {
        width: 100%;
        padding: 0px;
    }

    /*.gr_slot_opi_mini .gr_nota_resumen {
        display: inherit;
    }*/

}


@media (max-width:450px) {

    .gr_descrip_buscador {
        font: 500 clamp(16px, 4.4vw, 24px) / 120% var(--font-barlowcon);
    }

    .gr_con_buscador_opi {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .gr_input_buc_opi {
        max-width: 100% !important;
        font: 400 clamp(11px, 3.2vw, 13px) / 120% var(--font-barlowcon);
    }

    .gr_submit_busc_opi {
        font: 600 clamp(11px, 3.2vw, 13px) / 120% var(--font-barlowcon);
        padding: 0 23px;
    }

    .autocomplete-item {
        font: 400 clamp(11px, 4.2vw, 16.5px) / 120% var(--font-barlowcon);
        margin-bottom: 10px;
    }

    .autocomplete-wrap {
        flex: auto;
        width: 100%;
    }
}

@media (max-width:420px) {
    .gr_titulo_edit {
        /* font: 400 18px / 120% var(--font-barlowcon); */
        /* font: 400 var(--font-size-t03-mini) / 120% var(--font-barlowcon); */
        /* font: 400 18px / 120% var(--font-barlowcon); */
        font: 400 var(--font-size-opinion-titulo-nota-r) / 120% var(--font-barlowcon);
    }

    .gr_titulo_opinion {
        font: 600 var(--font-size-t-division-r) / 1.2em var(--font-barlowcon) !important;
    }

    .gr_boton_opinionver {
        /* font: 400 13px / 21 var(--font-barlowcon); */
        font: var(--font-sbp) var(--font-size-boton-r) / 2.1em var(--font-barlowcon);
    }

    .gr_nombre_edit {
        /* font: 300 11px / 120% var(--font-barlowcon); */
        font: 400 var(--font-size-opinion-modulo-nombre-r) / 120% var(--font-barlowcon);
    }

    .gr_sec_edit {
        font: 400 var(--font-size-seccion-r) / 120% var(--font-barlowcon);
    }

}