/* =========================================================================
   Livesic Market
   ========================================================================= */

.lv-market {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    color: var(--lv-ink);
    min-width: 0;
}

.lv-market--dashboard {
    container-type: inline-size;
}

.lv-market-single-page {
    padding: 32px 16px 56px;
}

.lv-market__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.lv-market__title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}

.lv-market__sub {
    margin: 4px 0 0;
    color: var(--lv-muted);
}

.lv-market__head-actions,
.lv-market-detail__actions,
.lv-market-row__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Botón secundario relleno (p.ej. "Mi panel"): visible sobre el fondo, sin competir
   con el primario. Usa variables de tema → contrasta bien en claro y oscuro. */
.lv-btn--secondary {
    background: var(--lv-theme-secondary);
    color: var(--lv-theme-secondary-ink);
    border-color: var(--lv-theme-border-strong);
}

.lv-btn--secondary:hover {
    background: var(--lv-theme-elevated);
    border-color: var(--lv-theme-ink);
    color: var(--lv-theme-ink);
    transform: translateY(-1px);
}

.lv-market-btn-with-badge {
    justify-content: space-between;
    min-height: 44px;
    padding-inline: 16px;
    border-color: color-mix(in srgb, var(--lv-accent) 72%, var(--lv-border));
    background: color-mix(in srgb, var(--lv-accent) 11%, var(--lv-surface));
    color: var(--lv-accent);
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .14);
}

.lv-market-btn-with-badge:hover {
    border-color: var(--lv-accent);
    background: color-mix(in srgb, var(--lv-accent) 17%, var(--lv-surface));
    color: var(--lv-accent);
    transform: translateY(-1px);
}

.lv-market-btn-with-badge .lv-market-tab-badge {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .2);
}

.lv-market-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-surface);
    box-shadow: var(--lv-shadow);
}

.lv-market-filters input[type="search"] {
    grid-column: span 2;
}

.lv-market-filters__location {
    grid-column: 1 / -1;
}

.lv-market-filters__location .livesic-region-picker,
.lv-market-field--location .livesic-region-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.lv-market__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.lv-market-card {
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-surface);
    overflow: hidden;
    box-shadow: var(--lv-shadow);
    display: flex;
    flex-direction: column;
}

.lv-market-card__image {
    min-height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #e8eef8;
    display: block;
}

.lv-market-card__image--empty,
.lv-market-gallery--empty {
    background: linear-gradient(135deg, #eef2ff, #ecfeff);
}

.lv-market-card__body {
    padding: 14px 16px 16px;
    display: grid;
    gap: 8px;
}

.lv-market-card__meta,
.lv-market-detail__kicker,
.lv-market-muted {
    color: var(--lv-muted);
    font-size: 12px;
}

/* Iconos de los botones de cabecera ("Mi panel", "Publicar anuncio"). */
.lv-market__head .livesic-btn__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Venta o alquiler: distintivo del anuncio de alquiler y selector del formulario.
   Colores por variables de tema para que valga en claro y en oscuro. */
.lv-market-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lv-market-type--rent {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: var(--lv-theme-info-bg);
    color: var(--lv-theme-info);
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 700;
}

.lv-market-type-choice {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lv-market-type-choice .lv-checkbox-card {
    flex: 1 1 160px;
}

.lv-market-card h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.lv-market-card h2 a {
    color: inherit;
    text-decoration: none;
}

.lv-market-card__price,
.lv-market-detail__price {
    font-weight: 800;
    color: var(--lv-accent);
}

.lv-market-card p {
    margin: 0;
    color: var(--lv-muted);
    font-size: 13px;
    line-height: 1.45;
}

.lv-market-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.lv-market-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 24px;
    align-items: start;
}

.lv-market-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Miniaturas clicables (botones): la primera grande 4/3, el resto cuadradas.
   Al pulsar abren el lightbox global (data-lv-poster-open, livesic-detail-actions.js). */
.lv-market-gallery__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-sm);
    background-color: var(--lv-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: zoom-in;
}

.lv-market-gallery__img:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

.lv-market-gallery--empty {
    min-height: 320px;
    border: 1px dashed var(--lv-border);
    border-radius: var(--lv-radius);
    display: grid;
    place-items: center;
    color: var(--lv-muted);
}

.lv-market-detail__body {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-surface);
    box-shadow: var(--lv-shadow);
}

.lv-market-detail__body h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
}

.lv-market-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lv-market-detail__seller,
.lv-market-detail__desc p {
    margin: 0;
}

.lv-market-action-box {
    border-top: 1px solid var(--lv-border);
    padding-top: 12px;
}

.lv-market-action-box summary {
    cursor: pointer;
    font-weight: 700;
}

.lv-market-action-box form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.lv-market-action-box--muted {
    opacity: .86;
}

.lv-market-offer-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--lv-accent) 28%, var(--lv-border));
    border-radius: var(--lv-radius-sm);
    background: color-mix(in srgb, var(--lv-accent) 7%, var(--lv-surface));
    scroll-margin-top: 24px;
}

.lv-market-offer-box h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

.lv-market-offer-box form {
    display: grid;
    gap: 10px;
}

.lv-market-money-input {
    position: relative;
    display: block;
}

.lv-market-money-input .lv-input {
    width: 100%;
    padding-right: 38px;
}

.lv-market-money-input span {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lv-muted);
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.lv-market-form {
    display: grid;
    gap: 16px;
    max-width: 820px;
    padding: 18px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-surface);
    box-shadow: var(--lv-shadow);
}

.lv-market-field {
    display: grid;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}

.lv-market-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.lv-market-checks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.lv-market-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lv-market-form__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lv-market-photo-tile {
    position: relative;
    width: 96px;
    height: 96px;
}

.lv-market-photo-tile img,
.lv-market-photo-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--lv-radius-sm);
    border: 1px solid var(--lv-border);
}

.lv-market-photo-tile.is-marked-for-removal {
    display: none;
}

.lv-market-photo-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .86);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}

.lv-market-photo-remove:hover {
    background: #b91c1c;
}

.lv-market-other-input[hidden] {
    display: none;
}

.lv-market-photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.lv-market-photo-preview[hidden] {
    display: none;
}

.lv-market-photo-preview__item {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.lv-market-photo-preview__item img {
    aspect-ratio: 1;
    height: auto;
}

.lv-market-photo-preview__item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lv-muted);
}

.lv-market-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--lv-border);
}

.lv-market-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--lv-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 700;
}

.lv-market-tabs a.is-active {
    color: var(--lv-accent);
    border-bottom-color: var(--lv-accent);
}

.lv-market-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

.lv-market-tab-badge[hidden] {
    display: none !important;
}

.lv-market-list,
.lv-market-table-wrap {
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-surface);
    box-shadow: var(--lv-shadow);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.lv-market-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.lv-market-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--lv-border);
}

.lv-market-row:last-child {
    border-bottom: 0;
}

.lv-market-row span {
    display: block;
    color: var(--lv-muted);
    font-size: 13px;
    margin-top: 2px;
}

.lv-market-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.lv-market-table th,
.lv-market-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--lv-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

.lv-market-table th:last-child,
.lv-market-table td:last-child {
    min-width: 230px;
}

.lv-market-table__actions {
    width: 1%;
}

.lv-market-table a {
    overflow-wrap: anywhere;
}

.lv-market-user-link {
    color: var(--lv-accent);
    font-weight: 800;
    text-decoration: none;
}

.lv-market-user-link:hover {
    text-decoration: underline;
}

.lv-market-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.lv-market-status-badge--accepted {
    border-color: #10b981;
    background: #dcfce7;
    color: #065f46;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.lv-market-status-badge--rejected,
.lv-market-status-badge--cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.lv-market-status-badge--countered {
    background: #e0f2fe;
    color: #075985;
}

.lv-market-status-badge--sent {
    background: #fef3c7;
    color: #92400e;
}

.lv-market-inline-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    max-width: 100%;
    vertical-align: top;
}

.lv-input--small {
    min-height: 34px;
    min-width: 150px;
    max-width: 220px;
}

.lv-input--counter {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 140px;
}

.lv-market-counter-form {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: 6px;
}

.lv-market-counter-form .lv-btn {
    flex: 0 0 auto;
}

@container (max-width: 860px) {
    .lv-market-table-wrap--offers {
        overflow: visible;
    }

    .lv-market-table--offers,
    .lv-market-table--offers thead,
    .lv-market-table--offers tbody,
    .lv-market-table--offers tr,
    .lv-market-table--offers th,
    .lv-market-table--offers td {
        display: block;
    }

    .lv-market-table--offers {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .lv-market-table--offers thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lv-market-table--offers tr {
        padding: 14px;
        border-bottom: 1px solid var(--lv-border);
    }

    .lv-market-table--offers tr:last-child {
        border-bottom: 0;
    }

    .lv-market-table--offers td {
        display: grid;
        grid-template-columns: minmax(82px, .34fr) minmax(0, 1fr);
        gap: 12px;
        padding: 8px 0;
        border-bottom: 0;
        min-width: 0 !important;
        width: auto;
    }

    .lv-market-table--offers td::before {
        content: attr(data-label);
        color: var(--lv-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .lv-market-table--offers .lv-market-table__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: auto;
    }

    .lv-market-table--offers .lv-market-table__actions::before {
        margin-top: 8px;
    }

    .lv-market-table--offers .lv-market-inline-form,
    .lv-market-table--offers .lv-market-counter-form {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .lv-market-table--offers .lv-market-inline-form + .lv-market-inline-form,
    .lv-market-table--offers .lv-market-counter-form {
        margin-top: 8px;
    }

    .lv-market-table--offers .lv-market-inline-form .lv-btn {
        min-width: 0;
    }

    .lv-market-table--offers .lv-market-counter-form .lv-input--counter {
        flex: 1 1 160px;
        width: 100%;
        min-width: 0;
    }
}

.lv-market-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.lv-market-pagination a {
    min-width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-sm);
    text-decoration: none;
    color: var(--lv-ink);
}

.lv-market-pagination a.is-active {
    background: var(--lv-accent);
    border-color: var(--lv-accent);
    color: #fff;
}

.lv-market__empty {
    padding: 38px 22px;
    border: 1px dashed var(--lv-border);
    border-radius: var(--lv-radius);
    color: var(--lv-muted);
    text-align: center;
    background: var(--lv-surface);
}

@media (max-width: 760px) {
    .lv-market-detail {
        grid-template-columns: 1fr;
    }

    /* Filtros del Market en móvil: 1 por línea salvo Precio min/max (misma línea),
       y el botón "Filtrar" centrado. Se usa un grid de 2 columnas donde casi todo
       ocupa el ancho completo; solo los dos precios comparten fila. */
    .lv-market-filters {
        grid-template-columns: 1fr 1fr;
    }
    .lv-market-filters > .lv-input,
    .lv-market-filters > select,
    .lv-market-filters input[type="search"],
    .lv-market-filters__location {
        grid-column: 1 / -1;
    }
    .lv-market-filters input[name="price_min"],
    .lv-market-filters input[name="price_max"] {
        grid-column: span 1;
    }
    /* País, Comunidad, Provincia y Localidad también uno por línea en móvil. */
    .lv-market-filters__location .livesic-region-picker {
        grid-template-columns: 1fr;
    }
    .lv-market-filters .lv-btn--primary {
        grid-column: 1 / -1;
        justify-self: center;
        width: auto;
    }

    .lv-market-row,
    .lv-market__head {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Galería del formulario de anuncio (añadir imágenes una a una, hasta 5) */
.lv-market-gallery-picker {
    display: grid;
    gap: 10px;
}

.lv-market-gallery-picker__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lv-market-gallery-picker__thumbs:empty {
    display: none;
}

.lv-market-gallery-picker__thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1.5px solid var(--lv-border);
    background: #f8faff center/cover no-repeat;
}

.lv-market-gallery-picker__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.lv-market-gallery-picker__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lv-market-gallery-picker__count {
    font-size: 12px;
    color: var(--lv-muted);
}

/* --- Escaparate de anuncios externos (2026-08-29) ------------------------
   Anuncios traídos de otras webs de segunda mano. Se muestran con la MISMA
   tarjeta que los de Livesic para no romper la rejilla, pero siempre con el
   distintivo de su origen encima de la foto; la ficha lleva al anuncio real.
   Colores por variables de tema: vale en claro y en oscuro. */

.lv-market-card__image {
    position: relative;
}

.lv-market-source {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Sobre fotos claras u oscuras el contraste tiene que aguantar igual. */
    backdrop-filter: saturate(140%) blur(2px);
}

/* Aviso de la ficha: quién publica y que la venta NO ocurre en Livesic. */
.lv-market-detail__seller--external {
    padding: 10px 12px;
    border: 1px solid var(--lv-border);
    border-left: 3px solid var(--lv-accent);
    border-radius: var(--lv-radius);
    background-color: var(--lv-surface-2, var(--lv-surface));
    color: var(--lv-muted);
    font-size: 13px;
    line-height: 1.5;
}

.lv-market-detail__seller--external strong {
    color: var(--lv-text);
}

/* Botón que sale a la web de origen: el icono de "abrir fuera" avisa de que
   el enlace se va de Livesic. */
.lv-market-detail__out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lv-market-detail__out svg {
    flex: 0 0 auto;
    opacity: .85;
}

/* --- Buscador recogido de /market (2026-08-29) ---------------------------
   Igual que /bandas, /salas, /buscar-musicos y /bolos: fuera solo el campo de
   texto y el botón Filtros; el resto de filtros, en el panel plegable.
   Las clases .lv-search__controls / __inputwrap / __filters-toggle son las
   compartidas de livesic-profile.css. */

.lv-market-search {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* IMPRESCINDIBLE: .lv-market-filters lleva display:grid, que gana al atributo
   `hidden` del panel (el navegador solo le aplica display:none por defecto).
   Sin esta regla el panel se vería SIEMPRE abierto. */
.lv-market-filters[hidden] {
    display: none;
}

/* La lupa del campo es el botón de buscar: misma posición y tamaño que el icono
   decorativo de /bandas (.lv-search__inputicon), pero clicable. */
.lv-market__searchbtn {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lv-muted);
    line-height: 0;
    cursor: pointer;
    transition: color .15s;
}

.lv-market__searchbtn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.lv-market__searchbtn:hover,
.lv-market__searchbtn:focus-visible {
    color: var(--lv-accent);
}

/* El region-picker ocupa la fila entera también dentro del panel plegable. */
.lv-market-search .lv-market-filters__location {
    grid-column: 1 / -1;
}