.ckeditor {
    background-color: white;
    border-radius: 4px !important;
}

.table .table-row__item img {
    width: auto;
}

textarea {
    min-height: 80px;
}

.ckeditor {
    background-color: white;
    border-radius: 4px !important;
}

.form-input-error {
    display: block;
}

.mock-placeholder__message.with-icon::before {
    content: none;
}

.mock-placeholder__message .icon-plus::after,
.mock-placeholder__message .icon-plus::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    transform: translate(-50%, -50%);
    border-radius: .5rem;
    background-color: #aeaeae;
}

.mock-placeholder__message .icon-plus::after {
    width: 1.5rem;
    height: .2rem;
}

.mock-placeholder__message .icon-plus::before {
    width: .2rem;
    height: 1.5rem;
}

.table-row__item a:empty:before {
    content: '-';
}

.page-splitted__main h4 {
    margin: 1rem 0 2rem;
}

[class*='col-'] .form-control {
    min-width: initial;
}

.select2-dropdown.select-dropdown__default .select2-results__option:not(.select2-results__option--selectable):hover::before {
    content: none;
}

.autoscroll {
    overflow-x: auto;
}

.text-editor-row__head:hover .text-editor-title {
    opacity: 1;
}

.text-editor-title.no-hide {
    opacity: 1;
}

.text-editor-row__head:hover .e-handle + .text-editor-row__cell .text-editor-title:not(.no-hide) {
    opacity: 0;
}

.top-align {
    align-items: start;
}

*:focus-visible {
    outline: none;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}


.modal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    transition: opacity .2s ease-in-out;
}

    .modal.active {
        opacity: 1;
        visibility: visible;
    }

.modal__content {
    position: relative;
    width: 100%;
}

.modal__inner {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4.8rem 2.4rem 2.4rem;
    border-radius: 1rem;
    max-height: 90vh;
    width: 100%;
    background: #fff;
}

.modal__close {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
}

.modal__close-text {
    display: none;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 140%;
    color: #797a7a;
    margin: 2.4rem auto 0;
    transition: color .2s ease;
}

    .modal__close-text:hover {
        color: #071c17;
    }

.modal__close-icon {
    stroke: #797a7a;
    width: 2.4rem;
    height: 2.4rem;
    transition: stroke .2s ease;
}

    .modal__close-icon:hover {
        stroke: #071c17;
    }

.modal__title {
    font: 700 2rem/140% Raleway,sans-serif;
    display: block;
    text-align: center;
    margin-bottom: 2.4rem;
}

.modal__text {
    text-align: center;
    font-weight: 300;
    line-height: 140%;
    margin-bottom: 2.4rem;
}

.modal__button {
    max-width: 22.4rem;
    width: 100%;
    margin: 0 auto;
}

.modal-error .modal__content {
    max-width: 75.8rem;
}

.vis-hidden {
    position: absolute;
    width: 0;
    height: 0;
    left: -9999999px;
}

.ckeditor[readonly] {
    pointer-events: none;
    border-color: rgba(0, 0, 0, .2);
    background: none;
}

.form-wrapper.readonly {
    pointer-events: none;
    border-color: rgba(0, 0, 0, .2);
    background: none;
}

.form-control-readonly[readonly] {
    background-color: white;
}

/* V2 · T-026 — cola de moderacion de fotos de catalogo (spec 019).
   Grilla propia en vez de .bid-gallery: esa son miniaturas de 8rem para listar adjuntos, y aca
   el moderador tiene que poder juzgar la foto (el caso motivador es detectar que aparece una
   persona). Tarjetas grandes, con el contexto y las acciones debajo de cada imagen. */

.moderation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    grid-gap: 2rem;
}

.moderation-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: .1rem solid rgba(0, 0, 0, .1);
    border-radius: .6rem;
    background: white;
}

/* La portada es la foto que se copia al pedido y la que el cliente termina reclamando:
   se marca con un borde para que salte a la vista en la grilla. */
.moderation-card.is-cover {
    border-color: rgba(10, 60, 227, .45);
}

.moderation-card__photo {
    display: block;
    overflow: hidden;
    height: 20rem;
    background: linear-gradient(155.92deg, rgba(128, 157, 255, .1) -3.431%, rgba(10, 60, 227, .1) 105.997%), white;
}

.moderation-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moderation-card__info {
    padding: 1.2rem 1.2rem .4rem;
}

.moderation-card__title {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 600;
    /* Un nombre de ramo largo no puede empujar los botones fuera de la tarjeta. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moderation-card__meta {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .4rem;
    opacity: .6;
    font-size: 1.2rem;
}

.moderation-card__reason {
    padding: .8rem 1.2rem 0;
}

.moderation-card__actions {
    display: flex;
    gap: .8rem;
    /* margin-top auto: las acciones quedan alineadas abajo aunque las tarjetas de la fila
       tengan textos de distinto alto. */
    margin-top: auto;
    padding: 1.2rem;
}

.moderation-card__actions .btn {
    flex: 1;
}

/* V2 · T-026 — la cola se agrupa POR RAMO. Cada bloque es un ramo con todas sus fotos
   pendientes, para que el moderador las resuelva juntas y no deje el ramo a medias. */

.moderation-group {
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: .1rem solid rgba(0, 0, 0, .08);
}

.moderation-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.moderation-group__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.6rem;
    margin-bottom: 1.2rem;
}

.moderation-group__title {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.moderation-group__meta {
    display: flex;
    gap: 1.6rem;
    opacity: .6;
    font-size: 1.3rem;
}

/* V2 · T-026 — contexto del producto en el bloque de moderacion: descripcion, flores y precio.
   Es lo que le permite al moderador juzgar si la foto se corresponde con lo que se vende. */

.moderation-group__product {
    margin-bottom: 1.6rem;
    padding: 1.2rem 1.6rem;
    border-radius: .6rem;
    /* Fondo sutil: separa el contexto del producto de las tarjetas de foto sin competir con ellas,
       que son lo que el moderador tiene que mirar. */
    background: rgba(10, 60, 227, .04);
}

/* Tira de especificaciones: etiqueta chica arriba, valor abajo. Se escanea de un vistazo,
   a diferencia de una linea corrida de valores sin nombre. */
.moderation-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin: 0;
}

.moderation-specs__item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.moderation-specs__item dt {
    opacity: .5;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.moderation-specs__item dd {
    margin: 0;
    font-size: 1.4rem;
}

/* El total en negrita y el desglose atenuado al lado: son el mismo dato con dos niveles de
   detalle (14 = 7+5+2), no dos cosas distintas. */
.moderation-specs__detail {
    margin-left: .6rem;
    opacity: .6;
    font-size: 1.3rem;
}

/* Ambar, no rojo: un ramo sin flores puede ser legitimo (funebre, plantas). Llama la atencion
   sin acusar. */
.moderation-specs__item.warn dt,
.moderation-specs__item.warn dd {
    color: #b26a00;
    opacity: 1;
}

.moderation-group__text {
    max-width: 90rem;
    margin: .6rem 0 0;
    opacity: .7;
    font-size: 1.3rem;
    line-height: 1.5;
    /* Descripciones largas no pueden empujar la grilla de fotos hacia abajo sin control. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* V2 · T-030 — eleccion de la foto del recuerdo (spec 021).
   Se marca con borde y un check, no con texto: en la galeria del detalle hay varias fotos y un
   cartel por foto seria ruido. El boton dice que hace; el borde dice cual esta elegida. */

.memory-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.memory-pick.is-memory .bid-gallery__item {
    border-color: rgba(10, 60, 227, .9);
    box-shadow: 0 0 0 .3rem rgba(10, 60, 227, .3);
}

.memory-pick.is-memory .memory-pick__btn {
    background: rgba(10, 60, 227, .12);
    font-weight: 600;
}

/* El check dentro del boton solo se ve en la elegida. Es SVG y no el glifo "✓" de texto: como
   texto se veia fino y desalineado al lado del resto de los botones del panel. */
.memory-pick__btn .icon,
.moderation-card__memory .btn .icon {
    display: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .4rem;
    fill: currentColor;
    vertical-align: -.1rem;
}

.memory-pick.is-memory .memory-pick__btn .icon,
.moderation-card__memory .btn.is-memory .icon {
    display: inline-block;
}

/* ---- El distintivo sobre la foto ----
   La senal principal va SOBRE LA IMAGEN, no en el boton: recorriendo una grilla de fotos, el ojo
   mira las fotos. Con la marca solo en la etiqueta del boton, tocar parecia no hacer nada visible. */

.memory-badge {
    position: absolute;
    top: .8rem;
    left: .8rem;
    display: none;
    align-items: center;
    gap: .4rem;
    max-width: calc(100% - 1.6rem);
    padding: .4rem .8rem;
    border-radius: 10rem;
    background: #1152F2;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .25);
    pointer-events: none;
}

.memory-badge .icon {
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    fill: currentColor;
}

.memory-pick.is-memory .memory-badge--chosen,
.moderation-card.is-memory .memory-badge {
    display: inline-flex;
}

/* Gris y sin check: NO es una eleccion, es lo que se usaria si nadie elige. Solo aparece cuando la
   galeria no tiene ninguna elegida (`has-memory` lo pone Razor y lo mantiene el controlador). */
.memory-badge--default {
    background: rgba(0, 0, 0, .6);
    font-weight: 500;
}

.memory-gallery:not(.has-memory) .memory-pick.is-default .memory-badge--default {
    display: inline-flex;
}

/* El anillo de la foto elegida.

   Va con `outline` sobre la IMAGEN y no con box-shadow en el contenedor: la imagen se dibuja
   encima y tapaba el borde del contenedor, asi que el anillo no se veia. El offset negativo lo
   mete hacia adentro para que no descuadre la grilla. */
.moderation-card__photo {
    position: relative;
}

.moderation-card.is-memory .moderation-card__photo img,
.memory-pick.is-memory .bid-gallery__item img {
    outline: .3rem solid rgba(17, 82, 242, .9);
    outline-offset: -.3rem;
}

/* .bid-gallery son celdas de 8rem, pensadas para listar adjuntos: ahi un .btn-secondary (1.8rem)
   no entra y quedaba como un link. Se ensancha SOLO esta galeria para que el boton se vea igual
   que los del resto del panel. */
.memory-gallery {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 18rem));
}

.memory-gallery .bid-gallery__item {
    position: relative;
    width: 18rem;
    height: 18rem;
}

.memory-pick__btn {
    width: 100%;
}

/* En la cola el boton va debajo de la foto, separado de aprobar/rechazar: elegir el recuerdo NO
   es una decision de moderacion y no saca la foto de la cola. */
.moderation-card__memory {
    padding: .8rem 1.2rem 0;
}

.moderation-card__memory .btn {
    width: 100%;
    font-size: 1.2rem;
}

.moderation-card__memory .btn.is-memory {
    background: rgba(10, 60, 227, .12);
    font-weight: 600;
}


/* ------------------------------------------------------------------------
   V2 · T-034 — lista general de ramos destacados (spec 022).

   Una sola lista ordenada; en cada ciudad se muestran los 8 primeros que esten disponibles ahi.
   Por eso la pantalla tiene dos partes: la lista (lo unico que se mantiene) y la vista previa por
   ciudad (lo que responde "y aca que se ve", que la lista sola no puede contestar).
   ------------------------------------------------------------------------ */

.featured-search {
    position: relative;
    margin-bottom: 1.6rem;
}

.featured-search__results {
    margin-top: .8rem;
    border: .1rem solid rgba(0, 0, 0, .08);
    border-radius: .8rem;
    overflow: hidden;
}

.featured-search__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1rem 1.4rem;
    border-bottom: .1rem solid rgba(0, 0, 0, .06);
}

.featured-search__result:last-child {
    border-bottom: 0;
}

.featured-search__info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.featured-preview {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.featured-preview label {
    font-size: 1.3rem;
    opacity: .7;
    white-space: nowrap;
}

.featured-preview .form-control {
    max-width: 28rem;
}

.featured-preview__hint {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: .7;
}

.featured-item {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: .1rem solid rgba(0, 0, 0, .08);
}

.featured-item:last-child {
    border-bottom: 0;
}

/* El numero es la posicion en la LISTA GENERAL. En una ciudad donde el #2 no se vende, el #3 sale
   segundo — por eso la posicion se muestra atenuada y no como un ranking definitivo. */
.featured-item__position {
    width: 2.8rem;
    flex: none;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    opacity: .45;
}

.featured-item__photo {
    width: 7.2rem;
    height: 7.2rem;
    flex: none;
    border-radius: .8rem;
    overflow: hidden;
    background: rgba(0, 0, 0, .04);
}

.featured-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.featured-item__name {
    font-size: 1.5rem;
    font-weight: 600;
}

.featured-item__meta {
    display: flex;
    gap: 1.6rem;
    font-size: 1.3rem;
    opacity: .6;
}

.featured-item__flag {
    font-size: 1.2rem;
    opacity: .7;
}

/* Ambar, mismo criterio que "0 flores" en la cola de moderacion: es algo que hay que mirar, no un
   error. El destacado conserva su lugar y vuelve solo cuando la florista lo recupera. */
.featured-item__flag.warn {
    color: #8a6100;
    opacity: 1;
    font-weight: 600;
}

.featured-item__actions {
    display: flex;
    gap: .8rem;
    flex: none;
}

/* Elegida una ciudad, lo que NO se ve ahi se atenua en vez de ocultarse: sigue estando en la lista
   general y hay que poder reordenarlo desde esta misma pantalla. */
.featured-item.is-hidden-city {
    opacity: .45;
}

.featured-item.is-not-publishable .featured-item__photo {
    filter: grayscale(1);
}


/* Se vende en la ciudad pero quedo fuera del top: se atenua MENOS que el que no se vende ahi,
   porque este si tiene arreglo — subirlo en la lista lo hace aparecer. */
.featured-item.is-out-of-top {
    opacity: .75;
}


/* Manija de arrastre. Se apaga hasta que el mouse entra en la fila para no llenar la pantalla de
   puntitos: el administrador la encuentra cuando la busca, y no compite con la foto. */
.featured-item__handle {
    width: 1.6rem;
    flex: none;
    cursor: grab;
    opacity: .2;
    transition: opacity .15s;
}

.featured-item:hover .featured-item__handle {
    opacity: .55;
}

.featured-item__handle:active {
    cursor: grabbing;
}

.featured-item__handle .icon {
    width: 1.2rem;
    height: 1.8rem;
    fill: currentColor;
}

/* La fila que se esta arrastrando y el hueco donde va a caer. */
.featured-item.dndDragging {
    opacity: .4;
}

.featured-list .dndPlaceholder {
    height: 9.6rem;
    border: .2rem dashed rgba(17, 82, 242, .4);
    border-radius: .8rem;
    background: rgba(17, 82, 242, .04);
}

/* Flechas: el mismo SVG del panel rotado. Como icono dentro de un boton chico hay que fijarle
   tamano, si no hereda el del texto y se ve enorme. */
.featured-item__move .icon {
    width: 1.4rem;
    height: 1.2rem;
    fill: currentColor;
}

.featured-item__move .icon.up {
    transform: rotate(-90deg);
}

.featured-item__move .icon.down {
    transform: rotate(90deg);
}



/* El selector de la vista previa ahora son dos campos (pais + ciudad). */
.featured-preview .form-control {
    max-width: 20rem;
}

.featured-preview__hint.warn {
    color: #8a6100;
}


/* ---- T-034 · curaduria por ciudad ----
   La misma pantalla sirve dos listas (la general y la de una ciudad). Esta franja dice cual se esta
   editando: sin ella las filas son identicas y no se sabe que se esta tocando. */

.featured-mode {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1.2rem 1.6rem;
    border-radius: .8rem;
    background: rgba(17, 82, 242, .06);
}

.featured-mode__title {
    font-size: 1.5rem;
    font-weight: 600;
}

.featured-mode__hint {
    flex: 1;
    min-width: 24rem;
    font-size: 1.3rem;
    opacity: .7;
}

.featured-candidates {
    margin-top: 3.2rem;
    padding-top: 2rem;
    border-top: .1rem solid rgba(0, 0, 0, .08);
}

.featured-candidates__head {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.featured-candidates__title {
    font-size: 1.6rem;
    font-weight: 600;
}

.featured-candidates__count {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: .6;
}

.featured-candidate {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: .1rem solid rgba(0, 0, 0, .06);
}

.featured-candidate:last-child {
    border-bottom: 0;
}

.featured-candidate__pick {
    flex: none;
    min-width: 12rem;
}

/* Elegido: se destaca la fila entera, no solo el boton — recorriendo la grilla el ojo mira las
   filas, igual que en la moderacion de fotos. */
.featured-candidate.is-chosen {
    background: rgba(17, 82, 242, .06);
}

.featured-candidate.is-chosen .featured-candidate__pick {
    background: rgba(17, 82, 242, .14);
    font-weight: 600;
}


/* La grilla de abajo son SOLO los que aun se pueden agregar, asi que ya no hay estado "elegido"
   que pintar: el elegido se fue arriba. Lo unico que se marca es el tope alcanzado. */
.featured-candidates__note {
    font-size: 1.3rem;
}

.featured-candidates__note.warn {
    color: #8a6100;
    font-weight: 600;
}

.featured-candidate.is-disabled {
    opacity: .55;
}


/* Ahora son dos campos con etiqueta cada uno; sin esto las etiquetas se pegan al campo anterior. */
.featured-preview label + .form-control {
    margin-right: .8rem;
}


/* ------------------------------------------------------------------------
   V2 · T-036 — cobertura por ciudad (spec 023).

   Pantalla informativa: cuanto se ofrece en cada ciudad y, al entrar, por que lo cargado no se ve.
   ------------------------------------------------------------------------ */

.coverage-tools {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.coverage-tools .form-control {
    max-width: 28rem;
}

.coverage-summary {
    display: flex;
    gap: 2rem;
    font-size: 1.3rem;
    opacity: .75;
}

.coverage-summary .warn {
    color: #8a6100;
    opacity: 1;
    font-weight: 600;
}

/* La fila entera es un link al detalle: el clic natural es sobre la ciudad, no sobre un boton
   escondido al final de la fila. */
.coverage-row {
    display: flex;
    color: inherit;
    text-decoration: none;
    transition: background .12s;
}

.coverage-row:hover {
    background: rgba(17, 82, 242, .05);
}

/* Ciudad sin nada publicado: se atenua en vez de ocultarse. Es justamente la fila que el CEO
   quiere ver — donde no hay oferta. */
.coverage-row.is-empty {
    opacity: .5;
}

.coverage-hidden {
    font-size: 1.2rem;
    opacity: .6;
}

.coverage-tag {
    display: inline-block;
    margin-left: .6rem;
    padding: .2rem .6rem;
    border-radius: 10rem;
    background: rgba(0, 0, 0, .07);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.coverage-tag.warn {
    background: rgba(240, 180, 0, .22);
    color: #7a5600;
}

.coverage-tag.ok {
    background: rgba(17, 82, 242, .12);
    color: #1152F2;
}

/* ---- detalle de una ciudad ---- */

.coverage-head {
    margin-bottom: 2.4rem;
}

.coverage-head__title {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    font-size: 2.2rem;
    font-weight: 600;
}

.coverage-head__country {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: .6;
}

.coverage-stats {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.coverage-stat {
    min-width: 12rem;
    padding: 1.2rem 1.6rem;
    border-radius: .8rem;
    background: rgba(0, 0, 0, .04);
}

.coverage-stat.warn {
    background: rgba(240, 180, 0, .18);
}

.coverage-stat__value {
    display: block;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.coverage-stat__label {
    font-size: 1.2rem;
    opacity: .7;
}

.coverage-note {
    margin-top: 1.2rem;
    font-size: 1.3rem;
}

.coverage-note.warn {
    color: #8a6100;
    font-weight: 600;
}

.coverage-section {
    margin-top: 3.2rem;
}

.coverage-section__head {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.coverage-section__head .form-control {
    max-width: 24rem;
}

.coverage-section__title {
    font-size: 1.6rem;
    font-weight: 600;
}

.coverage-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
    cursor: pointer;
}

.coverage-shop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1rem 0;
    border-bottom: .1rem solid rgba(0, 0, 0, .06);
}

.coverage-shop:last-child {
    border-bottom: 0;
}

.coverage-shop.is-blocked {
    opacity: .6;
}

.coverage-shop__name {
    font-weight: 600;
}

.coverage-shop__counts {
    font-size: 1.3rem;
    white-space: nowrap;
}

.coverage-bouquet {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1rem 0;
    border-bottom: .1rem solid rgba(0, 0, 0, .06);
}

.coverage-bouquet:last-child {
    border-bottom: 0;
}

.coverage-bouquet__photo {
    width: 5.6rem;
    height: 5.6rem;
    flex: none;
    border-radius: .6rem;
    overflow: hidden;
    background: rgba(0, 0, 0, .04);
}

.coverage-bouquet__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coverage-bouquet__info {
    flex: 1;
    min-width: 0;
}

.coverage-bouquet__name {
    font-weight: 600;
}

.coverage-bouquet__meta {
    display: flex;
    gap: 1.6rem;
    font-size: 1.3rem;
    opacity: .6;
}

.coverage-bouquet__status {
    flex: none;
    text-align: right;
}

/* El que no se ve se atenua, pero no se esconde: el punto de la pantalla es encontrarlos. */
.coverage-bouquet.is-hidden-bouquet .coverage-bouquet__photo {
    filter: grayscale(1);
    opacity: .7;
}


/* La fila de tienda filtra la lista de abajo: tiene que verse clickeable y tiene que verse cual
   quedo elegida, si no la lista aparece corta sin motivo aparente. */
.coverage-shop.is-clickable {
    cursor: pointer;
    padding-left: .8rem;
    padding-right: .8rem;
    border-radius: .6rem;
    transition: background .12s;
}

.coverage-shop.is-clickable:hover {
    background: rgba(17, 82, 242, .05);
}

.coverage-shop.is-selected {
    background: rgba(17, 82, 242, .1);
    box-shadow: inset .3rem 0 0 #1152F2;
}

.coverage-section__count {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: .6;
}

.coverage-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem .4rem 1rem;
    border-radius: 10rem;
    background: rgba(17, 82, 242, .12);
    font-size: 1.2rem;
}

.coverage-chip__clear {
    padding: 0 .4rem;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}