/* =========================================================
   CERDO RD
   SISTEMA VISUAL PRINCIPAL
   HOME V2
   ========================================================= */


/* =========================================================
   1. VARIABLES DE DISEÑO
   ========================================================= */

:root {

    /* Marca */
    --cerdo-green-950: #073d20;
    --cerdo-green-900: #0a4f27;
    --cerdo-green-800: #0d5c2d;
    --cerdo-green-700: #0f6b35;
    --cerdo-green-600: #16803d;
    --cerdo-green-500: #22a353;

    /* Verdes suaves */
    --cerdo-green-100: #e5f4e9;
    --cerdo-green-50: #f2faf4;

    /* Superficies */
    --cerdo-bg: #f5f7f5;
    --cerdo-surface: #ffffff;
    --cerdo-surface-soft: #f9fbf9;

    /* Texto */
    --cerdo-text: #17281c;
    --cerdo-text-secondary: #5f6d63;
    --cerdo-text-muted: #7c887f;

    /* Bordes */
    --cerdo-border: #dfe6e1;
    --cerdo-border-strong: #cfd9d2;

    /* Estados */
    --cerdo-success: #1f9d55;
    --cerdo-warning: #d59b32;
    --cerdo-danger: #d9534f;

    /* Radios */
    --cerdo-radius-sm: 12px;
    --cerdo-radius-md: 18px;
    --cerdo-radius-lg: 24px;
    --cerdo-radius-xl: 30px;

    /* Sombras */
    --cerdo-shadow-sm:
        0 4px 14px rgba(12, 73, 36, 0.05);

    --cerdo-shadow-md:
        0 10px 30px rgba(12, 73, 36, 0.08);

    --cerdo-shadow-lg:
        0 18px 50px rgba(8, 65, 31, 0.12);

    /* Layout */
    --cerdo-content-width: 1180px;

}


/* =========================================================
   MERCADO — DISEÑO 1

   Estos estilos empiezan debajo de los contadores actuales.
   No modifican el encabezado, la ubicación ni las tarjetas
   superiores de Vendiendo / Comprando.
   ========================================================= */

.market-publication-success {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid #cfe7d6;
    border-radius: 14px;
    color: var(--cerdo-green-900);
    background: var(--cerdo-green-50);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.market-publication-success[hidden] {
    display: none !important;
}

.market-dual-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 9px;
    margin-bottom: 22px;
}

.market-dual-board.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.market-dual-board .market-list-section {
    min-width: 0;
    margin: 0;
    padding: 9px;
    border: 1px solid;
    border-radius: 18px;
}

.market-dual-board #marketSellingSection {
    border-color: #d5eadb;
    background: linear-gradient(180deg, #edf9f1, #f7fcf8);
}

.market-dual-board #marketBuyingSection {
    border-color: #eadff2;
    background: linear-gradient(180deg, #f7f1fb, #fcf9fd);
}

.market-dual-board .market-list-heading {
    align-items: flex-start;
    gap: 5px;
    margin: 0 1px 8px;
}

.market-dual-board .market-list-heading h3 {
    font-size: 14px;
    line-height: 1.2;
}

.market-dual-board #marketBuyingSection .market-list-heading h3,
.market-dual-board #marketBuyingSection .market-see-all {
    color: #7040a3;
}

.market-dual-board .market-list-heading span {
    font-size: 8px;
}

.market-dual-board .market-see-all {
    min-height: 34px;
    padding: 2px 0;
    font-size: 9px;
    white-space: nowrap;
}

.market-dual-board #sellingPublications,
.market-dual-board #buyingPublications {
    display: grid;
    align-content: start;
    gap: 7px;
    max-height: 430px;
    padding: 0 3px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: thin;
}

.market-dual-board #sellingPublications {
    scrollbar-color: #9dc9aa transparent;
}

.market-dual-board #buyingPublications {
    scrollbar-color: #c7abd8 transparent;
}

.market-dual-board .market-live-card {
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 4px 13px rgba(22, 65, 38, .055);
}

.market-dual-board .market-live-card--sell {
    border-color: #d5e8db;
    background: #ffffff;
}

.market-dual-board .market-live-card--buy {
    border-color: #e7dcef;
    background: #ffffff;
}

.market-dual-board .market-live-card--buy .market-live-top span {
    color: #75429d;
    background: #f0e6f6;
}

.market-dual-board .market-live-top {
    gap: 5px;
}

.market-dual-board .market-live-top span,
.market-dual-board .market-live-top small {
    font-size: 7.5px;
}

.market-dual-board .market-live-card h4 {
    margin: 8px 0 4px;
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.market-dual-board .market-live-card > strong {
    display: block;
    color: var(--cerdo-green-700);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.market-dual-board .market-live-card--buy > strong {
    color: #75429d;
}

.market-dual-board .market-live-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 8px 0 6px;
}

.market-dual-board .market-live-details span {
    width: 100%;
    padding: 5px 6px;
    border-radius: 8px;
    font-size: 7.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.market-dual-board .market-live-card--buy .market-live-details span {
    border-color: #eadff0;
    color: #5f4970;
    background: #fbf8fd;
}

.market-dual-board .market-live-card > .market-live-location {
    margin: 6px 0 9px;
    font-size: 9px;
    line-height: 1.3;
}

.market-dual-board .market-live-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding-top: 8px;
}

.market-dual-board .market-live-footer span {
    font-size: 9px;
}

.market-dual-board .market-live-footer button {
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 9px;
}

.market-dual-board .market-live-card--buy .market-live-footer button {
    background: #75429d;
}

.market-dual-board .market-empty-state {
    min-height: 210px;
    padding: 18px 8px;
    border-color: #d3e3d8;
    background: rgba(255, 255, 255, .7);
}

.market-dual-board #marketBuyingSection .market-empty-state {
    border-color: #e4d7ec;
}

.market-dual-board .market-empty-state strong {
    font-size: 11px;
}

.market-dual-board .market-empty-state p {
    font-size: 9px;
}

.market-dual-board.is-single .market-list-section {
    padding: 12px;
}

.market-dual-board.is-single .market-list-heading h3 {
    font-size: 18px;
}

.market-dual-board.is-single .market-list-heading span,
.market-dual-board.is-single .market-see-all {
    font-size: 10.5px;
}

.market-dual-board.is-single .market-live-card {
    padding: 15px;
}

.market-dual-board.is-single .market-live-card h4 {
    font-size: 15px;
}

.market-dual-board.is-single .market-live-card > strong {
    font-size: 17px;
}

.market-dual-board.is-single .market-live-details {
    display: flex;
    flex-wrap: wrap;
}

.market-dual-board.is-single .market-live-details span {
    width: auto;
    border-radius: 999px;
    font-size: 9px;
}

.market-dual-board.is-single .market-live-footer {
    align-items: center;
    flex-direction: row;
}

.market-dual-board.is-single .market-live-footer button {
    width: auto;
    min-width: 96px;
}

@media (max-width: 370px) {
    .market-dual-board {
        gap: 6px;
    }

    .market-dual-board .market-list-section {
        padding: 7px;
    }

    .market-dual-board .market-list-heading {
        display: grid;
    }

    .market-dual-board .market-see-all {
        justify-self: start;
    }

    .market-dual-board .market-live-card {
        padding: 8px;
    }
}


/* =========================================================
   MERCADO — DISEÑO 3: TARJETAS ENTRELAZADAS

   La cabecera, la ubicación y los contadores superiores
   conservan exactamente el sistema visual existente.
   ========================================================= */

.market-interwoven-board {
    margin: 0 0 22px;
    padding: 15px;
    border: 1px solid var(--cerdo-border);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fbf9);
    box-shadow: var(--cerdo-shadow-sm);
}

.market-interwoven-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.market-interwoven-kicker {
    color: var(--cerdo-green-700);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.market-interwoven-heading h3 {
    margin: 3px 0 0;
    color: var(--cerdo-text);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.market-interwoven-heading p {
    margin: 4px 0 0;
    color: var(--cerdo-text-muted);
    font-size: 10.5px;
}

.market-interwoven-order {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid #d5e8da;
    border-radius: 999px;
    color: var(--cerdo-green-800);
    background: var(--cerdo-green-50);
    font-size: 8.5px;
    font-weight: 800;
    white-space: nowrap;
}

.market-interwoven-list {
    position: relative;
    display: grid;
    align-content: start;
    max-height: min(610px, 62dvh);
    padding: 3px 6px 3px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #a8cab2 transparent;
}

.market-interwoven-list::-webkit-scrollbar {
    width: 5px;
}

.market-interwoven-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #a8cab2;
}

.market-interwoven-list::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 12px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6eb485, #d8c5e6 56%, #dfe9e2);
}

.market-interwoven-list .market-live-card {
    position: relative;
    min-width: 0;
    margin: 0 13px 12px 0;
    padding: 15px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(18, 70, 38, .075);
    transform: translateX(0);
}

.market-interwoven-list .market-live-card--sell {
    border: 1px solid #cfe6d6;
    border-left: 4px solid var(--cerdo-green-600);
}

.market-interwoven-list .market-live-card--buy {
    margin-right: 0;
    margin-left: 13px;
    border: 1px solid #e2d4ec;
    border-left: 4px solid #8552b7;
    background: linear-gradient(135deg, #ffffff, #fdfafe);
}

.market-interwoven-board[data-mode="selling"] .market-live-card,
.market-interwoven-board[data-mode="buying"] .market-live-card {
    margin-right: 0;
    margin-left: 0;
}

.market-interwoven-node {
    position: absolute;
    top: 21px;
    left: -25px;
    width: 12px;
    height: 12px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--cerdo-green-600);
    box-shadow: 0 0 0 2px #a9d2b5;
}

.market-live-card--buy .market-interwoven-node {
    left: -38px;
    background: #8552b7;
    box-shadow: 0 0 0 2px #d5bde5;
}

.market-interwoven-board[data-mode="buying"] .market-live-card--buy .market-interwoven-node {
    left: -25px;
}

.market-interwoven-list .market-live-card.is-newest {
    box-shadow: 0 10px 26px rgba(16, 103, 52, .13);
}

.market-interwoven-list .market-live-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
}

.market-interwoven-list .market-live-top > span:first-child {
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--cerdo-green-800);
    background: #e4f3e9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .3px;
}

.market-interwoven-list .market-live-card--buy .market-live-top > span:first-child {
    color: #75429d;
    background: #f0e6f6;
}

.market-live-recency {
    min-width: 0;
    color: var(--cerdo-green-700);
    font-size: 8.5px;
    font-weight: 800;
    text-align: left;
}

.market-interwoven-list .market-live-card--buy .market-live-recency {
    color: #75429d;
}

.market-interwoven-list .market-live-top small {
    color: var(--cerdo-text-muted);
    font-size: 9px;
    white-space: nowrap;
}

.market-interwoven-list .market-live-card h4 {
    margin: 12px 0 4px;
    color: var(--cerdo-text);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
}

.market-interwoven-list .market-live-card > strong {
    display: block;
    color: var(--cerdo-green-700);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
}

.market-interwoven-list .market-live-card--buy > strong {
    color: #75429d;
}

.market-interwoven-list .market-live-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 11px 0 9px;
}

.market-interwoven-list .market-live-details span {
    width: auto;
    padding: 6px 8px;
    border: 1px solid #dfebe2;
    border-radius: 999px;
    color: #415b49;
    background: #f6faf7;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
}

.market-interwoven-list .market-live-card--buy .market-live-details span {
    border-color: #eadff0;
    color: #5f4970;
    background: #fbf8fd;
}

.market-interwoven-list .market-live-card > .market-live-location {
    margin: 7px 0 12px;
    color: var(--cerdo-text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.market-interwoven-list .market-live-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid #edf1ee;
}

.market-interwoven-list .market-live-footer span {
    min-width: 0;
    overflow: hidden;
    color: #334f3c;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-interwoven-list .market-live-footer button {
    min-width: 104px;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: var(--cerdo-green-700);
    font: inherit;
    font-size: 10.5px;
    font-weight: 850;
    cursor: pointer;
}

.market-interwoven-list .market-live-card--buy .market-live-footer button {
    background: #75429d;
}

.market-interwoven-list > .market-empty-state {
    margin: 0 0 0 -20px;
}

@media (max-width: 430px) {
    .market-interwoven-board {
        padding: 13px 11px;
    }

    .market-interwoven-heading {
        align-items: center;
    }

    .market-interwoven-heading h3 {
        font-size: 17px;
    }

    .market-interwoven-order {
        max-width: 96px;
        min-height: 28px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .market-interwoven-list {
        max-height: min(590px, 60dvh);
        padding-left: 26px;
    }

    .market-interwoven-list .market-live-card {
        padding: 14px;
    }

    .market-interwoven-list .market-live-card h4 {
        font-size: 15px;
    }

    .market-interwoven-list .market-live-card > strong {
        font-size: 18px;
    }
}


/* =========================================================
   MERCADO V6 — FILTROS INTELIGENTES Y ESCALABLES
   ========================================================= */

.market-filter-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(760px, calc(100dvh - 32px));
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

.market-filter-dialog-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 18px 15px;
    border-bottom: 1px solid #e2ece5;
    background: linear-gradient(135deg, #f4fbf6 0%, #ffffff 75%);
}

.market-filter-form {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    padding: 15px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

.market-filter-group,
.market-filter-advanced {
    border: 1px solid #dce8df;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgb(16 74 38 / 4%);
}

.market-filter-group {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
}

.market-filter-group-primary {
    border-color: #cce5d4;
    background: linear-gradient(145deg, #f1faf4 0%, #ffffff 72%);
}

.market-filter-group-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.market-filter-group-heading > span {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border-radius: 9px;
    background: #ddf2e4;
    color: var(--cerdo-green-700);
    font-size: 11px;
    font-weight: 900;
}

.market-filter-group-heading h4 {
    margin: 0;
    color: #173e27;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.market-filter-group-heading p {
    margin: 3px 0 0;
    color: #6a796f;
    font-size: 10.5px;
    line-height: 1.4;
}

.market-filter-field {
    min-width: 0;
}

.market-filter-field input:focus,
.market-filter-field select:focus {
    border-color: #16934d;
    box-shadow: 0 0 0 3px rgb(22 147 77 / 12%);
}

.market-filter-field select:disabled {
    color: #8d9890;
    background-color: #f3f6f4;
}

.market-filter-advanced {
    overflow: clip;
}

.market-filter-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 11px 14px;
    color: #173e27;
    cursor: pointer;
    list-style: none;
}

.market-filter-advanced > summary::-webkit-details-marker {
    display: none;
}

.market-filter-advanced > summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.market-filter-advanced > summary strong {
    font-size: 13px;
    font-weight: 850;
}

.market-filter-advanced > summary small {
    color: #758179;
    font-size: 10px;
}

.market-filter-advanced > summary > span:last-child {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 9px;
    background: #edf7f0;
    color: var(--cerdo-green-700);
    font-size: 18px;
    font-weight: 700;
    transition: transform .16s ease;
}

.market-filter-advanced[open] > summary > span:last-child {
    transform: rotate(45deg);
}

.market-filter-advanced[open] > summary {
    border-bottom: 1px solid #e3ece6;
    background: #f8fcf9;
}

.market-filter-advanced-content {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
}

.market-filter-help {
    margin: 0;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f2f7f3;
    color: #617068;
    font-size: 10px;
    line-height: 1.45;
}

.market-filter-message {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f0b8b8;
    border-radius: 11px;
    background: #fff3f3;
    color: #a72b2b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.market-filter-message[hidden] {
    display: none !important;
}

.market-filter-result-preview {
    padding: 11px 12px;
    border: 1px solid #cfe6d6;
    border-radius: 12px;
    background: #eef9f1;
    color: #176b38;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.market-filter-actions {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0;
    padding: 13px 18px max(13px, env(safe-area-inset-bottom));
    border-top: 1px solid #dfe9e2;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -7px 20px rgb(20 83 45 / 7%);
    backdrop-filter: blur(10px);
}

.market-filter-reset:active,
.market-filter-apply:active {
    transform: translateY(1px);
}

@media (max-width: 430px) {
    .market-filter-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .market-filter-dialog {
        width: 100%;
        max-height: min(92dvh, 820px);
        border-radius: 24px 24px 0 0;
    }

    .market-filter-dialog-header {
        padding: 16px 16px 13px;
    }

    .market-filter-dialog-header::before {
        position: absolute;
        top: 6px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #ccd8cf;
        content: "";
        transform: translateX(-50%);
    }

    .market-filter-form {
        padding: 13px 15px 16px;
    }

    .market-filter-actions {
        padding-right: 15px;
        padding-left: 15px;
    }

    .market-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .market-filter-field input,
    .market-filter-field select {
        height: 44px;
        padding: 0 10px;
        font-size: 12px;
    }

    .market-input-unit input {
        padding-right: 58px;
    }
}

@media (max-width: 350px) {
    .market-filter-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 370px) {
    .market-interwoven-order {
        display: inline-flex;
    }

    .market-interwoven-list .market-live-card--sell,
    .market-interwoven-list .market-live-card--buy {
        margin-right: 0;
        margin-left: 0;
    }

    .market-interwoven-list .market-live-card--buy .market-interwoven-node {
        left: -25px;
    }

    .market-interwoven-list .market-live-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .market-interwoven-list .market-live-footer button {
        width: 100%;
    }
}


/* =========================================================
   DIÁLOGO — COMPLETAR PERFIL
   ========================================================= */

.profile-required-dialog,
.zone-detail-dialog {
    box-sizing: border-box;
    width: min(400px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #dbe7df;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(5, 39, 20, .3);
    font-family: inherit;
}

.profile-required-dialog:not([open]),
.zone-detail-dialog:not([open]) {
    display: none !important;
}

.profile-required-dialog::backdrop,
.zone-detail-dialog::backdrop {
    background: rgba(7, 31, 18, .56);
}

.profile-required-dialog *,
.zone-detail-dialog * {
    box-sizing: border-box;
}

.profile-required-dialog header,
.zone-detail-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    color: #ffffff;
    background: linear-gradient(130deg, #0c542e, #147e43);
}

.profile-required-dialog header span,
.zone-detail-dialog header span {
    color: #ccebd6;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.profile-required-dialog header h2,
.zone-detail-dialog header h2 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 21px;
}

.profile-required-dialog header button,
.zone-detail-dialog header button {
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}

.profile-required-content,
.zone-detail-content {
    display: grid;
    gap: 13px;
    padding: 18px;
}

.profile-required-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    border-radius: 19px;
    background: var(--cerdo-green-100);
    font-size: 27px;
}

.profile-required-content p,
.profile-required-content small {
    margin: 0;
    color: var(--cerdo-text-secondary);
    text-align: center;
    line-height: 1.5;
}

.profile-required-content p {
    font-size: 13px;
}

.profile-required-content small {
    font-size: 10px;
}

.profile-required-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
}

.profile-required-actions button {
    min-height: 46px;
    border: 1px solid var(--cerdo-border-strong);
    border-radius: 13px;
    color: var(--cerdo-green-800);
    background: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.profile-required-actions button:last-child {
    border-color: var(--cerdo-green-600);
    color: #ffffff;
    background: var(--cerdo-green-600);
}


/* =========================================================
   ZONAS — AMPLIACIÓN SIN SALIR DE LA PANTALLA
   ========================================================= */

.zone-detail-price {
    padding: 17px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cerdo-green-900), var(--cerdo-green-600));
}

.zone-detail-price span,
.zone-detail-price strong,
.zone-detail-price small {
    display: block;
}

.zone-detail-price span {
    color: #d2ecda;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.zone-detail-price strong {
    margin: 5px 0;
    font-size: 30px;
}

.zone-detail-price small {
    color: #e0f1e5;
    font-size: 10px;
}

.zone-detail-facts {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--cerdo-border);
    border-radius: 15px;
    overflow: hidden;
}

.zone-detail-facts div {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid #edf1ee;
}

.zone-detail-facts div:last-child {
    border-bottom: 0;
}

.zone-detail-facts dt,
.zone-detail-facts dd {
    margin: 0;
    font-size: 10px;
}

.zone-detail-facts dt {
    color: var(--cerdo-text-muted);
}

.zone-detail-facts dd {
    color: var(--cerdo-text);
    font-weight: 750;
    text-align: right;
}

.zone-detail-note {
    margin: 0;
    padding: 12px;
    border-radius: 13px;
    color: var(--cerdo-text-secondary);
    background: var(--cerdo-green-50);
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

.app-footer {
    display: grid;
    gap: 4px;
    padding: 24px 18px calc(112px + env(safe-area-inset-bottom, 0px));
    color: var(--cerdo-text-muted);
    background: transparent;
    text-align: center;
    font-size: 10px;
}

.app-footer strong,
.app-footer span {
    display: block;
}

.app-footer strong {
    color: var(--cerdo-green-800);
    font-size: 11px;
}

#mainPrice[data-state="historical"] {
    color: #ffffff;
}

/* =========================================================
   CERDO RD V3 — HOME, MERCADO, MÁS, REPUTACIÓN Y ZONAS
   ========================================================= */

.home-market-preview {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #dbe7df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 72, 41, .07);
}

.home-market-preview-heading,
.home-market-preview-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.home-market-see-all {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #c9dfd0;
    border-radius: 12px;
    color: #12693a;
    background: #f0f8f3;
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.home-market-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.home-market-preview-column {
    min-width: 0;
    padding: 11px;
    border: 1px solid #dce9e0;
    border-radius: 16px;
    background: #f7fbf8;
}

.home-market-preview-column.buying {
    border-color: #eadff2;
    background: #fbf8fd;
}

.home-market-preview-title span {
    padding: 4px 7px;
    border-radius: 7px;
    color: #17643a;
    background: #dff1e5;
    font-size: 8px;
    font-weight: 900;
}

.home-market-preview-column.buying .home-market-preview-title span {
    color: #7650a1;
    background: #eee4f6;
}

.home-market-preview-title h3 {
    margin: 0;
    color: #254532;
    font-size: 11px;
}

.home-market-mini-card {
    display: grid;
    gap: 5px;
    width: 100%;
    margin-top: 9px;
    padding: 0;
    border: 0;
    color: #183c27;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.home-market-mini-type { display: none; }
.home-market-mini-card strong { font-size: 12px; line-height: 1.25; }
.home-market-mini-card b { color: #11703a; font-size: 14px; }
.home-market-mini-card small { overflow: hidden; color: #66776d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-market-mini-empty { margin-top: 9px; color: #77877d; font-size: 10px; line-height: 1.4; }

/* Cuatro indicadores compactos en 2 × 2 para evitar títulos cortados. */
#homeView .market-reading-section .market-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#homeView .market-reading-section .market-card {
    min-height: 108px;
    padding: 11px;
    border-radius: 13px;
}

#homeView .market-reading-section .market-label {
    font-size: 10px;
    line-height: 1.25;
}

#homeView .market-reading-section .market-value {
    margin-top: 7px;
    font-size: clamp(19px, 5vw, 24px);
}

#homeView .market-reading-section .market-detail {
    margin-top: 6px;
    font-size: 9px;
    line-height: 1.3;
}

/* Cada grupo mantiene su altura y su propio desplazamiento. */
#sellingPublications,
#buyingPublications {
    max-height: 390px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    border: 1px solid #e1eae4;
    border-radius: 18px;
    background: #f8fbf9;
    scrollbar-width: thin;
    scrollbar-color: #a7c9b2 transparent;
}

#sellingPublications::-webkit-scrollbar,
#buyingPublications::-webkit-scrollbar { width: 5px; }
#sellingPublications::-webkit-scrollbar-thumb,
#buyingPublications::-webkit-scrollbar-thumb { border-radius: 99px; background: #a7c9b2; }

.compact-market #sellingPublications,
.compact-market #buyingPublications { max-height: 315px; }
.compact-market .market-live-card { padding: 11px; border-radius: 15px; }
.compact-market .market-live-card h4 { margin-top: 8px; }
.compact-market .market-live-details { margin: 7px 0 5px; }

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* Selector de unidad en Publicar compra. */
.buy-price-unit {
    margin: 0;
    padding: 0;
    border: 0;
}
.buy-price-unit legend { margin-bottom: 8px; color: #294b35; font-size: 12px; font-weight: 800; }
.buy-price-unit-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.buy-price-unit-options label { position: relative; cursor: pointer; }
.buy-price-unit-options input { position: absolute; opacity: 0; pointer-events: none; }
.buy-price-unit-options label > span {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #d5e1d8;
    border-radius: 13px;
    color: #385443;
    background: #fff;
}
.buy-price-unit-options strong,
.buy-price-unit-options small { display: block; }
.buy-price-unit-options strong { font-size: 11px; }
.buy-price-unit-options small { margin-top: 3px; color: #718177; font-size: 8px; }
.buy-price-unit-options input:checked + span { border-color: #158047; color: #14683a; background: #edf8f1; box-shadow: 0 0 0 2px rgba(21,128,71,.1); }

.account-hub-view,
.profile-view,
.my-posts-view,
.zones-view {
    padding-top: 18px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.account-menu-group-title {
    margin: 20px 5px 9px;
    color: #557062;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.account-secondary-menu .account-menu-item { min-height: 70px; }
.account-menu-icon.settings { color: #436c55; background: #edf3ef; }
.account-menu-icon.help { color: #276695; background: #eaf4fb; }
.account-menu-icon.feedback { color: #7c4a9c; background: #f4eefa; }
.account-menu-icon.privacy { color: #17623c; background: #eaf6ee; }
.account-menu-icon.terms { color: #8a5c16; background: #fff5df; }
.account-menu-icon.about { color: #315f79; background: #ebf5f9; }

.more-content-dialog {
    box-sizing: border-box;
    width: min(400px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #dbe7df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(5,39,20,.3);
    font-family: inherit;
}
.more-content-dialog:not([open]) { display: none !important; }
.more-content-dialog::backdrop { background: rgba(7,31,18,.56); }
.more-content-dialog * { box-sizing: border-box; }
.more-content-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(130deg, #0c542e, #147e43);
}
.more-content-dialog header span { color: #ccebd6; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.more-content-dialog header h2 { margin: 4px 0 0; color: #fff; font-size: 21px; }
.more-content-dialog header button { width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); font: inherit; font-size: 24px; cursor: pointer; }
.more-info-body { display: grid; gap: 12px; padding: 18px; }
.more-info-body section { padding: 13px; border-radius: 14px; background: #f5f9f6; }
.more-info-body h3 { margin: 0 0 5px; color: #1b422b; font-size: 14px; }
.more-info-body p { margin: 0; color: #5c7062; font-size: 11px; line-height: 1.55; }
.more-info-version { color: #39704e !important; font-weight: 750; }
.more-about-lead { text-align: center; }
.more-about-lead > div { margin-bottom: 7px; font-size: 32px; }
.more-dialog-field { display: grid; gap: 7px; color: #294b35; font-size: 12px; font-weight: 800; }
.more-dialog-field select,
.more-dialog-field textarea { width: 100%; padding: 11px 12px; border: 1px solid #cfdcd3; border-radius: 13px; color: #203528; background: #fff; font: inherit; font-size: 14px; resize: vertical; }
.more-dialog-field small { color: #728278; text-align: right; font-size: 9px; }
.more-setting-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px; border-radius: 14px; background: #f3f8f5; }
.more-setting-row strong,
.more-setting-row small { display: block; }
.more-setting-row strong { color: #254733; font-size: 12px; }
.more-setting-row small { margin-top: 3px; color: #67796d; font-size: 9px; line-height: 1.35; }
.more-setting-row input { width: 21px; height: 21px; accent-color: #147640; }

.zones-search-card,
.zone-result-card {
    border: 1px solid #dbe7df;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(24,65,38,.06);
}
.zones-page-header { margin-bottom: 14px; padding: 20px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0b542d, #148044); }
.zones-page-header span { color: #ccebd6; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.zones-page-header h2 { margin: 4px 0; color: #fff; font-size: 27px; }
.zones-page-header p { margin: 0; color: #d9eee0; font-size: 12px; }
.zones-search-card { padding: 15px; }
.zones-search-card label { display: block; margin-bottom: 7px; color: #294b35; font-size: 12px; font-weight: 800; }
.zones-search-card input { width: 100%; min-height: 49px; padding: 11px 13px; border: 1px solid #cedbd2; border-radius: 14px; color: #203528; background: #fff; font: inherit; font-size: 14px; }
.zones-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: #66796d; font-size: 10px; }
.zones-search-meta button { border: 0; color: #14703c; background: transparent; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.zones-results { display: grid; gap: 9px; margin-top: 12px; }
.zone-result-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 13px; color: #1f402c; text-align: left; font: inherit; cursor: pointer; }
.zone-result-pin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #14713d; background: #eaf6ee; font-size: 19px; }
.zone-result-card strong,
.zone-result-card small,
.zone-result-price b { display: block; }
.zone-result-card strong { font-size: 13px; }
.zone-result-card small { margin-top: 3px; color: #6b7b71; font-size: 9px; }
.zone-result-price { text-align: right; }
.zone-result-price b { color: #116d39; font-size: 13px; }
.zones-empty-state { padding: 18px; border: 1px dashed #cfded4; border-radius: 16px; color: #6a7b70; background: #f8fbf9; text-align: center; font-size: 11px; }

@media (max-width: 430px) {
    .home-market-preview { padding: 13px; }
    .home-market-preview-heading { align-items: flex-start; }
    .home-market-preview-heading .home-card-heading-copy p { display: none; }
    .home-market-see-all { min-height: 34px; padding: 6px 9px; }
    .home-market-preview-grid { gap: 7px; }
    .home-market-preview-column { padding: 9px; border-radius: 14px; }
    #sellingPublications,
    #buyingPublications { max-height: 360px; padding: 6px; }
    .account-page-header,
    .account-subpage-header { padding: 17px; }
    .account-secondary-menu .account-menu-item { min-height: 67px; padding: 12px 14px; }
    .zone-result-card { grid-template-columns: auto minmax(0,1fr); }
    .zone-result-price { grid-column: 2; text-align: left; }
}


/* =========================================================
   30. PUBLICAR VENTA — DISEÑO A POR SECCIONES
   ========================================================= */

#sellPostView {
    min-height: auto !important;
    padding-bottom: 92px !important;
}


.sell-market-progress {
    grid-template-columns:
        auto 1fr auto 1fr auto 1fr auto !important;
}


.required-label {
    color: var(--cerdo-danger);
    font-weight: 900;
}


.sell-section-note {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 11px;
    background: #f6f8f6;
    color: var(--cerdo-text-muted);
    font-size: 10px;
    line-height: 1.45;
}


/* MODALIDADES DE PRECIO */

.sell-choice-list {
    display: grid;
    gap: 9px;
}


.sell-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--cerdo-border);
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.sell-choice-card.is-selected {
    border-color: #77ba87;
    background: var(--cerdo-green-50);
    box-shadow: 0 0 0 2px rgba(34, 163, 83, .08);
}


.sell-choice-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}


.sell-choice-control {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid var(--cerdo-border-strong);
    border-radius: 50%;
    background: #ffffff;
}


.sell-choice-card.is-selected .sell-choice-control {
    border: 5px solid var(--cerdo-green-700);
}


.sell-choice-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.sell-choice-copy strong {
    color: var(--cerdo-text);
    font-size: 12px;
    font-weight: 880;
    line-height: 1.3;
}


.sell-choice-copy strong em {
    display: inline-flex;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--cerdo-green-100);
    color: var(--cerdo-green-800);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    vertical-align: middle;
}


.sell-choice-copy small {
    color: var(--cerdo-text-secondary);
    font-size: 10px;
    line-height: 1.42;
}


/* REFERENCIA DINÁMICA */

.sell-market-reference,
.sell-fixed-price {
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #cfe5d5;
    border-radius: 15px;
    background: linear-gradient(180deg, #f6fcf7 0%, #eef8f0 100%);
}


.sell-market-reference[hidden],
.sell-fixed-price[hidden],
.sell-info-popover[hidden] {
    display: none !important;
}


.sell-market-reference-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.sell-market-reference-top span {
    color: var(--cerdo-text-secondary);
    font-size: 10px;
    font-weight: 780;
}


.sell-market-reference-top strong {
    color: var(--cerdo-green-900);
    font-size: 17px;
    font-weight: 920;
    text-align: right;
}


.sell-market-reference > p {
    margin-top: 5px;
    color: var(--cerdo-text-secondary);
    font-size: 9.5px;
    line-height: 1.4;
}


.sell-market-notice {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d8eadc;
    color: var(--cerdo-green-800);
    font-size: 9.5px;
    line-height: 1.42;
}


.sell-market-notice svg {
    width: 17px;
    height: 17px;
}


.sell-fixed-price .create-field {
    width: 100%;
}


/* AJUSTE EN LÍNEA Y AYUDAS */

.sell-inline-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d8eadc;
}


.sell-inline-setting > div {
    min-width: 0;
}


.sell-inline-setting strong,
.sell-label-with-info > strong {
    color: var(--cerdo-text);
    font-size: 11px;
    font-weight: 850;
}


.sell-inline-setting small {
    display: block;
    margin-top: 3px;
    color: var(--cerdo-text-muted);
    font-size: 9px;
    line-height: 1.35;
}


.sell-label-with-info {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}


.sell-info-button {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #b9d8c1;
    border-radius: 50%;
    background: #ffffff;
    color: var(--cerdo-green-800);
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}


.sell-info-button[aria-expanded="true"] {
    border-color: var(--cerdo-green-700);
    background: var(--cerdo-green-700);
    color: #ffffff;
}


.sell-info-popover {
    margin-top: 9px;
    padding: 10px 11px;
    border: 1px solid #d8e5db;
    border-radius: 11px;
    background: #ffffff;
    color: var(--cerdo-text-secondary);
    box-shadow: var(--cerdo-shadow-sm);
    font-size: 9.8px;
    line-height: 1.48;
}


/* SWITCH NEGOCIABLE */

.sell-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cerdo-text-secondary);
    cursor: pointer;
}


.sell-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}


.sell-switch > span {
    position: relative;
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: #cfd8d1;
    transition: background .16s ease;
}


.sell-switch > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
    transition: transform .16s ease;
}


.sell-switch input:checked + span {
    background: var(--cerdo-green-600);
}


.sell-switch input:checked + span::after {
    transform: translateX(17px);
}


.sell-switch em {
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
}


/* TRANSPORTE Y VIGENCIA */

.sell-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}


.sell-fieldset + .sell-fieldset {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cerdo-border);
}


.sell-fieldset > legend {
    margin-bottom: 8px;
    color: var(--cerdo-text-secondary);
    font-size: 11px;
    font-weight: 820;
}


.sell-compact-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}


.sell-compact-option {
    position: relative;
    cursor: pointer;
}


.sell-compact-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}


.sell-compact-option > span {
    min-height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid var(--cerdo-border);
    border-radius: 12px;
    background: #ffffff;
}


.sell-compact-option input:checked + span {
    border-color: #78ba88;
    background: var(--cerdo-green-50);
    box-shadow: inset 3px 0 0 var(--cerdo-green-600);
}


.sell-compact-option strong {
    color: var(--cerdo-text);
    font-size: 10.5px;
    font-weight: 840;
    line-height: 1.25;
}


.sell-compact-option small {
    color: var(--cerdo-text-muted);
    font-size: 8.8px;
    line-height: 1.32;
}


.sell-validity-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}


.sell-validity-options label {
    position: relative;
    cursor: pointer;
}


.sell-validity-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}


.sell-validity-options label > span {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 6px;
    border: 1px solid var(--cerdo-border);
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}


.sell-validity-options input:checked + span {
    border-color: var(--cerdo-green-600);
    background: var(--cerdo-green-50);
    box-shadow: 0 0 0 2px rgba(34, 163, 83, .08);
}


.sell-validity-options strong {
    color: var(--cerdo-text);
    font-size: 12px;
    font-weight: 880;
}


.sell-validity-options small {
    color: var(--cerdo-text-muted);
    font-size: 8px;
    font-weight: 700;
}


.sell-validity-options input:checked + span small {
    color: var(--cerdo-green-700);
}


.sell-notes-field {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cerdo-border);
}


/* RECORDATORIO DE REVISIÓN */

.sell-review-preview {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #eadfca;
    border-radius: 16px;
    background: #fffaf0;
}


.sell-review-preview-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f7e8c9;
    color: #966413;
}


.sell-review-preview-icon svg {
    width: 22px;
    height: 22px;
}


.sell-review-preview strong {
    color: #7c5310;
    font-size: 12px;
    font-weight: 900;
}


.sell-review-preview p {
    margin-top: 3px;
    color: #755f39;
    font-size: 10px;
    line-height: 1.42;
}


@media (max-width: 600px) {

    .sell-market-progress {
        padding: 0;
    }


    .sell-market-progress .create-market-progress-item small {
        font-size: 7.8px;
    }


    .sell-market-reference-top {
        align-items: flex-start;
    }


    .sell-market-reference-top strong {
        max-width: 55%;
        font-size: 14px;
    }

}


@media (max-width: 430px) {

    .sell-compact-options {
        grid-template-columns: 1fr;
    }


    .sell-compact-option > span {
        min-height: 58px;
    }


    .sell-validity-options {
        gap: 6px;
    }


    .sell-validity-options label > span {
        min-height: 55px;
        padding: 7px 4px;
    }


    .sell-inline-setting {
        align-items: flex-start;
    }

}


/* =========================================================
   2. BASE GENERAL
   ========================================================= */

html {
    min-height: 100%;
    background: var(--cerdo-bg);
}

body {
    min-height: 100%;

    background:
        linear-gradient(
            180deg,
            #f8faf8 0%,
            var(--cerdo-bg) 100%
        );

    color: var(--cerdo-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   3. ELEMENTOS INTERACTIVOS
   ========================================================= */

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}


/* =========================================================
   4. CONTENEDOR PRINCIPAL
   ========================================================= */

.container {
    width:
        min(
            var(--cerdo-content-width),
            calc(100% - 32px)
        );

    margin:
        22px auto
        110px;
}


/* =========================================================
   5. ACCESIBILIDAD
   ========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {

    outline:
        3px solid
        rgba(34, 163, 83, 0.22);

    outline-offset: 2px;
}


/* =========================================================
   6. UTILIDADES QUE USAREMOS EN EL NUEVO HOME
   ========================================================= */

.cerdo-card {

    background:
        var(--cerdo-surface);

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        var(--cerdo-radius-lg);

    box-shadow:
        var(--cerdo-shadow-sm);
}


.cerdo-section-title {

    color:
        var(--cerdo-text);

    font-size:
        22px;

    font-weight:
        800;

    line-height:
        1.2;
}


.cerdo-muted {

    color:
        var(--cerdo-text-secondary);
}


/* =========================================================
   7. MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .container {

        width:
            calc(100% - 20px);

        margin-top:
            14px;

        margin-bottom:
            105px;
    }


    .cerdo-section-title {

        font-size:
            20px;
    }

}


/* =========================================================
   8. PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 430px) {

    .container {

        width:
            calc(100% - 16px);
    }

}

/* =========================================================
   9. HEADER PRINCIPAL
   ========================================================= */

.app-header {

    position: relative;

    z-index: 100;

    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-900) 0%,
            var(--cerdo-green-700) 100%
        );

    color: #ffffff;

    padding:
        14px 20px;

    box-shadow:
        0 4px 18px
        rgba(7, 61, 32, 0.14);
}


.app-header .header-content {

    width:
        min(
            var(--cerdo-content-width),
            100%
        );

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


/* =========================================================
   MARCA
   ========================================================= */

.app-header .brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

    flex:
        1 1 auto;
}


.app-header .pig-logo {

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #ffd1df,
            #f6a9c4
        );

    border:
        3px solid
        rgba(255, 255, 255, 0.7);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.12);

    font-size:
        29px;
}


.app-header .brand-copy {

    min-width:
        0;
}


.app-header .brand h1 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        850;

    line-height:
        1.1;

    letter-spacing:
        -0.4px;
}


.app-header .brand p {

    margin:
        4px 0 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        12px;

    line-height:
        1.3;
}


/* =========================================================
   ACCIONES DEL HEADER
   ========================================================= */

.app-header .admin-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    flex:
        0 0 auto;
}


/* PANEL */

.app-header .admin-button {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.26);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.11);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        750;

    cursor:
        pointer;

    backdrop-filter:
        blur(8px);

    transition:
        background 160ms ease,
        transform 160ms ease,
        border-color 160ms ease;
}


.app-header .admin-button:hover {

    background:
        rgba(255, 255, 255, 0.18);

    border-color:
        rgba(255, 255, 255, 0.4);
}


.app-header .admin-button:active {

    transform:
        scale(0.97);
}


/* BOTÓN REDONDO */

.header-icon-button,
.app-header .session-icon-button {

    width:
        44px;

    height:
        44px;

    min-width:
        44px;

    min-height:
        44px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.26);

    background:
        rgba(255, 255, 255, 0.10);

    color:
        #ffffff;
}


.header-icon-button {

    cursor:
        default;
}


/*
 * La campana está visualmente preparada
 * pero todavía no tiene funcionalidad.
 */

.header-icon-button:disabled {

    opacity:
        0.72;
}


/* SVG */

.header-action-icon,
.app-header .session-icon-svg {

    width:
        21px;

    height:
        21px;

    display:
        block;

    flex:
        0 0 auto;
}


/* =========================================================
   HEADER MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .app-header {

        padding:
            12px 14px;
    }


    .app-header .header-content {

        gap:
            10px;
    }


    .app-header .brand {

        gap:
            10px;
    }


    .app-header .pig-logo {

        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;

        font-size:
            26px;
    }


    .app-header .brand h1 {

        font-size:
            22px;
    }


    .app-header .brand p {

        display:
            none;
    }


    .app-header .admin-button {

        min-height:
            42px;

        padding:
            0 12px;

        border-radius:
            13px;

        font-size:
            12px;
    }


    .header-icon-button,
    .app-header .session-icon-button {

        width:
            42px;

        height:
            42px;

        min-width:
            42px;

        min-height:
            42px;

        border-radius:
            13px;
    }

}


/* =========================================================
   HEADER EN TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 420px) {

    .app-header {

        padding:
            11px 10px;
    }


    .app-header .pig-logo {

        width:
            43px;

        height:
            43px;

        flex-basis:
            43px;

        font-size:
            24px;
    }


    .app-header .brand h1 {

        font-size:
            20px;
    }


    .app-header .admin-button {

        padding:
            0 10px;
    }


    .app-header .admin-actions {

        gap:
            6px;
    }

}

/* =========================================================
   10. HERO — MERCADO SELECCIONADO
   ========================================================= */

.hero.market-hero {
    position: relative;
    overflow: hidden;

    padding: 0;

    background:
        linear-gradient(
            140deg,
            var(--cerdo-green-950) 0%,
            var(--cerdo-green-800) 58%,
            var(--cerdo-green-700) 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        var(--cerdo-radius-lg);

    box-shadow:
        var(--cerdo-shadow-lg);

    text-align: left;

    color: #ffffff;
}


.market-hero-top {
    position: relative;

    min-height: 300px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(180px, 0.65fr);

    align-items: center;

    gap: 24px;

    padding:
        30px;
}


.market-hero-copy {
    position: relative;
    z-index: 2;
}


.market-hero-label {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.10);

    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        12px;

    font-weight:
        750;
}


.market-hero-pin {
    font-size:
        14px;
}


.hero.market-hero
.selected-place {
    margin:
        0 0 5px;

    color:
        #ffffff;

    font-size:
        clamp(27px, 4vw, 40px);

    font-weight:
        850;

    line-height:
        1.06;

    letter-spacing:
        -0.6px;
}


.hero.market-hero
.selected-province {
    margin:
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        14px;

    line-height:
        1.4;
}


.market-price-block {
    margin-top:
        25px;
}


.market-price-label {
    margin-bottom:
        5px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;
}


.hero.market-hero
.main-price {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(44px, 7vw, 66px);

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -1.5px;
}


.hero.market-hero
.main-unit {
    margin-top:
        7px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        13px;
}


.hero.market-hero
.main-meta {
    margin-top:
        18px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        13px;

    line-height:
        1.4;
}


.change-zone-button {
    min-height:
        42px;

    margin-top:
        20px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.13);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background 160ms ease,
        transform 160ms ease;
}


.change-zone-button:active {
    transform:
        scale(0.97);
}


.market-hero-symbol {
    position: relative;

    min-height:
        220px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.market-hero-symbol::before {
    content: "";

    position: absolute;

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.07);
}


.market-hero-pig {
    position: relative;
    z-index: 1;

    width:
        150px;

    height:
        150px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        38px;

    background:
        linear-gradient(
            145deg,
            #ffd4df,
            #f2abc0
        );

    border:
        5px solid
        rgba(255, 255, 255, 0.24);

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.17);

    font-size:
        82px;

    transform:
        rotate(3deg);
}


.market-hero-country {
    position: absolute;

    right:
        8px;

    bottom:
        9px;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.92);

    color:
        var(--cerdo-green-900);

    font-size:
        12px;

    font-weight:
        850;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.12);
}


/* =========================================================
   HERO MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .market-hero-top {
        min-height:
            0;

        grid-template-columns:
            minmax(0, 1fr)
            105px;

        gap:
            10px;

        padding:
            23px 18px;
    }


    .market-hero-label {
        margin-bottom:
            17px;
    }


    .hero.market-hero
    .selected-place {
        font-size:
            29px;
    }


    .hero.market-hero
    .main-price {
        font-size:
            49px;
    }


    .market-hero-symbol {
        min-height:
            170px;
    }


    .market-hero-symbol::before {
        width:
            145px;

        height:
            145px;
    }


    .market-hero-pig {
        width:
            96px;

        height:
            96px;

        border-radius:
            27px;

        font-size:
            53px;
    }


    .market-hero-country {
        right:
            0;

        bottom:
            13px;

        padding:
            6px 8px;
    }

}


/* =========================================================
   HERO EN TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 430px) {

    .market-hero-top {
        grid-template-columns:
            minmax(0, 1fr)
            82px;

        padding:
            21px 16px;
    }


    .hero.market-hero
    .selected-place {
        font-size:
            26px;
    }


    .hero.market-hero
    .main-price {
        font-size:
            45px;
    }


    .market-hero-pig {
        width:
            78px;

        height:
            78px;

        border-radius:
            23px;

        font-size:
            43px;
    }


    .market-hero-country {
        display:
            none;
    }

}
/* =========================================================
   11. SELECTOR DE ZONA COMPACTO
   ========================================================= */

.zone-card {
    padding: 20px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        var(--cerdo-radius-lg);

    background:
        var(--cerdo-surface);

    box-shadow:
        var(--cerdo-shadow-sm);
}


/* CABECERA */

.zone-card .zone-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 16px;
}


.zone-card .zone-heading h2 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 21px;

    font-weight: 850;

    line-height: 1.2;
}


/* BOTÓN UBICACIÓN */

.zone-card .location-button {
    min-height: 42px;

    padding:
        0 15px;

    border:
        1px solid
        #ccebd5;

    border-radius:
        12px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-green-800);

    font-size:
        13px;

    font-weight:
        800;

    white-space:
        nowrap;
}


/*
 * La explicación antigua ocupa demasiado espacio
 * en el nuevo Home.
 */

.zone-card .zone-description {
    display: none;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.zone-card .location-search {
    position: relative;

    width: 100%;

    margin:
        0 0 12px;
}


.zone-card
.location-search
input {
    width: 100%;

    height: 48px;

    padding:
        0 15px;

    border:
        1px solid
        var(--cerdo-border-strong);

    border-radius:
        13px;

    background:
        #ffffff;

    color:
        var(--cerdo-text);

    font-size:
        14px;

    outline:
        none;
}


.zone-card
.location-search
input::placeholder {
    color:
        var(--cerdo-text-muted);
}


.zone-card
.location-search
input:focus {
    border-color:
        var(--cerdo-green-600);

    box-shadow:
        0 0 0 3px
        rgba(34, 163, 83, 0.10);
}


/* =========================================================
   SELECTORES
   ========================================================= */

.zone-card .location-fields {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        10px;

    width:
        100%;
}


.zone-card .field {
    min-width: 0;
}


.zone-card .field label {
    display: block;

    margin:
        0 0 5px;

    color:
        var(--cerdo-text-secondary);

    font-size:
        11px;

    font-weight:
        750;
}


.zone-card .field select {
    width: 100%;

    height: 46px;

    padding:
        0 34px 0 12px;

    border:
        1px solid
        var(--cerdo-border-strong);

    border-radius:
        12px;

    background-color:
        #ffffff;

    color:
        var(--cerdo-text);

    font-size:
        13px;

    outline:
        none;

    text-overflow:
        ellipsis;
}


.zone-card .field select:focus {
    border-color:
        var(--cerdo-green-600);

    box-shadow:
        0 0 0 3px
        rgba(34, 163, 83, 0.10);
}


/* MENSAJE INFERIOR */

.zone-card .selection-message {
    margin-top:
        12px;

    padding:
        10px 12px;

    border-radius:
        11px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-text-secondary);

    font-size:
        12px;

    line-height:
        1.35;
}


/* =========================================================
   SELECTOR EN MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .zone-card {
        padding:
            17px;
    }


    .zone-card .zone-heading {
        margin-bottom:
            13px;
    }


    .zone-card .zone-heading h2 {
        font-size:
            19px;
    }


    .zone-card .location-button {
        min-height:
            39px;

        padding:
            0 12px;

        font-size:
            12px;
    }


    .zone-card
    .location-search
    input {
        height:
            45px;
    }


    .zone-card .location-fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
     * Distrito / zona ocupa todo el ancho
     * para evitar selects demasiado estrechos.
     */

    .zone-card
    .location-fields
    .field:nth-child(3) {
        grid-column:
            1 / -1;
    }


    .zone-card .field select {
        height:
            44px;
    }

}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 430px) {

    .zone-card {
        padding:
            15px;
    }


    .zone-card .zone-heading {
        gap:
            8px;
    }


    .zone-card .zone-heading h2 {
        font-size:
            18px;
    }


    .zone-card .location-button {
        padding:
            0 9px;

        font-size:
            11px;
    }


    .zone-card .selection-message {
        font-size:
            11px;
    }

}
/* =========================================================
   12. AJUSTE FINAL DEL ENCABEZADO DEL SELECTOR
   ========================================================= */

.zone-card .zone-heading {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.zone-card .location-button {
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 430px) {

    .zone-card .zone-heading {
        flex-direction: row;
        align-items: center;
    }

    .zone-card .zone-heading h2 {
        text-align: left;
        font-size: 18px;
    }

    .zone-card .location-button {
        width: auto;
        padding: 0 9px;
        font-size: 11px;
    }

}
/* =========================================================
   13. LECTURA DEL MERCADO — COMPACTA
   ========================================================= */

.market-reading-section {
    margin-top: 18px;
    padding-top: 0;
    border-top: 0;
    text-align: left;
}

.market-reading-section .section-title {
    margin: 0 0 14px;

    color: var(--cerdo-text);

    font-size: 21px;
    font-weight: 850;
    line-height: 1.2;
}


/* GRID */

.market-reading-section .market-dashboard {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
    margin: 0;
}


/* TARJETAS */

.market-reading-section .market-card {
    min-width: 0;

    min-height: 138px;

    padding: 15px 14px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 16px;

    background:
        var(--cerdo-surface);

    box-shadow:
        var(--cerdo-shadow-sm);

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* TÍTULO DE CADA MÉTRICA */

.market-reading-section .market-label {
    display: block;

    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: 0;

    text-transform: none;
}


/* VALOR */

.market-reading-section .market-value {
    display: block;

    margin: 14px 0 0;

    color:
        var(--cerdo-green-700);

    font-size: 25px;

    font-weight: 900;

    line-height: 1.05;
}


/* INFORMACIÓN INFERIOR */

.market-reading-section .market-detail {
    display: block;

    margin-top: 9px;

    color:
        var(--cerdo-text-muted);

    font-size: 11px;

    line-height: 1.3;
}


/* EXPLICACIÓN */

.market-reading-section .market-explanation {
    margin-top: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .market-reading-section .section-title {
        font-size: 19px;
    }

    .market-reading-section .market-dashboard {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }

    .market-reading-section .market-card {
        min-height: 120px;

        padding:
            13px 12px;
    }

    .market-reading-section .market-value {
        font-size: 23px;
    }

}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 430px) {

    .market-reading-section .market-card {
        min-height: 112px;
    }

    .market-reading-section .market-label {
        font-size: 11px;
    }

    .market-reading-section .market-value {
        font-size: 22px;
    }

}
/* =========================================================
   14. LECTURA DEL MERCADO
   DISEÑO HÍBRIDO DEFINITIVO
   ========================================================= */

.market-reading-section {
    margin-top: 20px;
    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;
}


/* =========================================================
   CABECERA
   ========================================================= */

.market-reading-header {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;
}


.market-reading-heading {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}


.market-reading-heading-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-700);
}


.market-reading-heading-icon svg {
    width: 20px;
    height: 20px;
}


.market-reading-section .section-title {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 21px;

    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -0.25px;
}


/* =========================================================
   ¿CÓMO LEERLO?
   ========================================================= */

.market-help {
    margin-left: auto;
}


.market-help summary {
    min-height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 0 8px;

    border-radius: 10px;

    color:
        var(--cerdo-green-700);

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    list-style: none;

    user-select: none;

    -webkit-tap-highlight-color: transparent;
}


.market-help summary::-webkit-details-marker {
    display: none;
}


.market-help summary:hover {
    background:
        var(--cerdo-green-50);
}


.market-help[open] {
    flex-basis: 100%;

    width: 100%;
}


.market-help[open] summary {
    margin-left: auto;

    display: flex;

    width: max-content;
}


.market-help .market-explanation {
    margin: 8px 0 0;

    padding: 12px 14px;

    border:
        1px solid
        #d8eadc;

    border-radius: 13px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-text-secondary);

    font-size: 12px;

    line-height: 1.45;

    box-shadow: none;
}


.market-help
.market-explanation strong {
    color:
        var(--cerdo-green-900);
}


/* =========================================================
   GRID DE MÉTRICAS
   ========================================================= */

.market-reading-section
.market-dashboard {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 11px;

    width: 100%;

    margin: 0;
}


/* =========================================================
   TARJETA
   ========================================================= */

.market-reading-section
.market-card {
    position: relative;

    min-width: 0;

    min-height: 135px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfb 100%
        );

    box-shadow:
        var(--cerdo-shadow-sm);

    overflow: hidden;
}


/*
 * Ligero detalle visual para dar profundidad
 * sin sobrecargar la tarjeta.
 */

.market-reading-section
.market-card::after {
    content: "";

    position: absolute;

    right: -22px;
    bottom: -28px;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background:
        rgba(34, 163, 83, 0.035);

    pointer-events: none;
}


/* =========================================================
   CABECERA DE CADA MÉTRICA
   ========================================================= */

.market-card-heading {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 8px;
}


.market-card-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-700);
}


.market-card-icon svg {
    width: 18px;
    height: 18px;
}


.market-reading-section
.market-label {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0;

    text-transform: none;
}


/* =========================================================
   VALOR
   ========================================================= */

.market-reading-section
.market-value {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: 17px;

    color:
        var(--cerdo-green-800);

    font-size: 26px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.4px;

    overflow-wrap: anywhere;
}


/* =========================================================
   INFORMACIÓN SECUNDARIA
   ========================================================= */

.market-reading-section
.market-detail {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: auto;

    padding-top: 10px;

    color:
        var(--cerdo-text-muted);

    font-size: 11px;

    line-height: 1.3;
}


/* =========================================================
   ESTADO DE TENDENCIA
   ========================================================= */

.market-reading-section
.market-trend-up
.market-card-icon {
    background:
        #e1f5e7;

    color:
        var(--cerdo-success);
}


.market-reading-section
.market-trend-up
.market-value {
    color:
        var(--cerdo-success);
}


.market-reading-section
.market-trend-down
.market-card-icon {
    background:
        #fff3df;

    color:
        #b66c16;
}


.market-reading-section
.market-trend-down
.market-value {
    color:
        #b66c16;
}


.market-reading-section
.market-trend-stable
.market-value {
    color:
        var(--cerdo-green-800);
}


/* =========================================================
   INTERACCIÓN VISUAL
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .market-reading-section
    .market-card {
        transition:
            transform 160ms ease,
            box-shadow 160ms ease,
            border-color 160ms ease;
    }


    .market-reading-section
    .market-card:hover {
        transform:
            translateY(-2px);

        border-color:
            #c9ddd0;

        box-shadow:
            var(--cerdo-shadow-md);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .market-reading-section {
        margin-top:
            18px;
    }


    .market-reading-header {
        margin-bottom:
            12px;
    }


    .market-reading-heading-icon {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

        border-radius:
            10px;
    }


    .market-reading-section
    .section-title {
        font-size:
            19px;
    }


    .market-reading-section
    .market-dashboard {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            9px;
    }


    .market-reading-section
    .market-card {
        min-height:
            125px;

        padding:
            13px 12px;
    }


    .market-card-icon {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;
    }


    .market-card-icon svg {
        width:
            17px;

        height:
            17px;
    }


    .market-reading-section
    .market-label {
        font-size:
            11px;
    }


    .market-reading-section
    .market-value {
        margin-top:
            15px;

        font-size:
            23px;
    }


    .market-reading-section
    .market-detail {
        font-size:
            10.5px;
    }

}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 430px) {

    .market-reading-heading {
        gap:
            7px;
    }


    .market-reading-section
    .section-title {
        font-size:
            18px;
    }


    .market-help summary {
        padding:
            0 4px;

        font-size:
            11px;
    }


    .market-reading-section
    .market-card {
        min-height:
            118px;

        padding:
            12px 10px;
    }


    .market-card-heading {
        gap:
            6px;
    }


    .market-card-icon {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }


    .market-reading-section
    .market-label {
        font-size:
            10.5px;
    }


    .market-reading-section
    .market-value {
        font-size:
            22px;
    }

}
/* =========================================================
   15. RESUMEN DEL MERCADO — ESTADÍSTICAS COMPACTAS
   ========================================================= */

.stats {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

    margin:
        18px 0;
}


.stat-card {
    min-width: 0;

    min-height: 112px;

    padding:
        15px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfb 100%
        );

    box-shadow:
        var(--cerdo-shadow-sm);
}


/* ICONO */

.stat-card .stat-icon {
    width: 36px;
    height: 36px;

    margin:
        0 0 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        var(--cerdo-green-100);

    font-size: 20px;

    line-height: 1;
}


/* NÚMERO */

.stat-card .stat-number {
    margin: 0;

    color:
        var(--cerdo-green-800);

    font-size: 25px;

    font-weight: 900;

    line-height: 1;
}


/* TEXTO */

.stat-card .stat-label {
    margin-top: 6px;

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    font-weight: 650;

    line-height: 1.25;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .stats {
        gap: 8px;

        margin:
            16px 0;
    }


    .stat-card {
        min-height: 104px;

        padding:
            12px 8px;

        border-radius:
            15px;
    }


    .stat-card .stat-icon {
        width: 32px;
        height: 32px;

        margin-bottom: 6px;

        font-size: 18px;
    }


    .stat-card .stat-number {
        font-size: 23px;
    }


    .stat-card .stat-label {
        font-size: 10.5px;
    }

}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 390px) {

    .stats {
        gap: 6px;
    }


    .stat-card {
        padding:
            11px 5px;
    }


    .stat-card .stat-number {
        font-size: 21px;
    }


    .stat-card .stat-label {
        font-size: 10px;
    }

}
/* =========================================================
   16. CTA — REPORTAR PRECIO
   ========================================================= */

.report-area {
    position: relative;

    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    margin:
        18px 0;

    padding:
        20px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-900) 0%,
            var(--cerdo-green-700) 100%
        );

    color:
        #ffffff;

    box-shadow:
        var(--cerdo-shadow-md);
}


/* DETALLE DE FONDO */

.report-area::after {
    content: "";

    position: absolute;

    right: -60px;
    top: -80px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    pointer-events: none;
}


/* ICONO */

.report-area-icon {
    position: relative;
    z-index: 1;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        17px;

    background:
        rgba(255, 255, 255, 0.10);

    color:
        #ffffff;
}


.report-area-icon svg {
    width: 31px;
    height: 31px;
}


/* TEXTO */

.report-area-copy {
    position: relative;
    z-index: 1;

    min-width: 0;
}


.report-area h3 {
    margin: 0;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        850;

    line-height:
        1.2;
}


.report-area p {
    margin:
        6px 0 0;

    max-width:
        560px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        12px;

    line-height:
        1.45;
}


/* BOTÓN */

.report-area .report-button {
    position: relative;
    z-index: 1;

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        13px;

    background:
        #ffffff;

    color:
        var(--cerdo-green-900);

    font-size:
        13px;

    font-weight:
        850;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.10);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.report-area .report-button svg {
    width:
        18px;

    height:
        18px;
}


.report-area
.report-button:active {
    transform:
        scale(0.97);
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .report-area {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap:
            13px;

        padding:
            17px;
    }


    .report-area-icon {
        width:
            50px;

        height:
            50px;

        border-radius:
            15px;
    }


    .report-area-icon svg {
        width:
            27px;

        height:
            27px;
    }


    .report-area h3 {
        font-size:
            16px;
    }


    .report-area p {
        font-size:
            11px;
    }


    .report-area .report-button {
        grid-column:
            1 / -1;

        width:
            100%;

        min-height:
            46px;

        margin-top:
            2px;
    }

}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 430px) {

    .report-area {
        padding:
            15px;
    }


    .report-area h3 {
        font-size:
            15px;
    }

}

/* =========================================================
   17. REPORTAR PRECIO — CTA FLOTANTE FIJO
   ========================================================= */

.report-area {
    position: fixed;

    left: 50%;
    bottom: 14px;

    transform: translateX(-50%);

    z-index: 900;

    width:
        min(
            560px,
            calc(100% - 24px)
        );

    min-height: 58px;

    margin: 0;

    padding: 7px;

    display: block;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-900),
            var(--cerdo-green-700)
        );

    box-shadow:
        0 10px 30px
        rgba(7, 61, 32, 0.24);
}


/*
 * El CTA flotante será compacto.
 * Ocultamos el texto e icono grandes anteriores.
 */

.report-area-icon,
.report-area-copy {
    display: none;
}


/* BOTÓN COMPLETO */

.report-area .report-button {
    width: 100%;
    min-height: 46px;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border: 0;

    border-radius: 13px;

    background: #ffffff;

    color:
        var(--cerdo-green-900);

    font-size: 14px;

    font-weight: 850;

    box-shadow: none;
}


.report-area .report-button::before {
    content: "+";

    width: 27px;
    height: 27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-800);

    font-size: 23px;

    font-weight: 700;

    line-height: 1;
}


/*
 * Ya utilizamos + como indicador principal,
 * por lo que ocultamos la flecha anterior.
 */

.report-area
.report-button svg {
    display: none;
}


/* =========================================================
   EVITAR QUE EL BOTÓN TAPE EL FINAL DE LA PÁGINA
   ========================================================= */

.container {
    padding-bottom: 95px;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .report-area {
        bottom: 12px;

        width:
            calc(100% - 20px);

        min-height: 58px;
    }


    .report-area .report-button {
        min-height: 46px;

        font-size: 14px;
    }


    .container {
        padding-bottom: 100px;
    }

}

/* =========================================================
   19. NAVEGACIÓN INFERIOR — GEOMETRÍA ÚNICA Y ESTABLE
   ========================================================= */

:root {
    --cerdo-bottom-nav-row: 52px;
    --cerdo-bottom-nav-height: 74px;
    --cerdo-bottom-nav-safe: env(safe-area-inset-bottom, 0px);
}

.bottom-navigation {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1000;

    width: 100%;
    max-width: 720px;

    height:
        calc(
            var(--cerdo-bottom-nav-height)
            +
            var(--cerdo-bottom-nav-safe)
        );

    min-height:
        calc(
            var(--cerdo-bottom-nav-height)
            +
            var(--cerdo-bottom-nav-safe)
        );

    max-height:
        calc(
            var(--cerdo-bottom-nav-height)
            +
            var(--cerdo-bottom-nav-safe)
        );

    margin: 0 auto;

    padding:
        9px
        10px
        calc(13px + var(--cerdo-bottom-nav-safe));

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    grid-template-rows:
        var(--cerdo-bottom-nav-row);

    align-items: stretch;
    align-content: start;

    box-sizing: border-box;

    background:
        rgba(255, 255, 255, 0.985);

    border-top:
        1px solid
        var(--cerdo-border);

    box-shadow:
        0 -8px 28px
        rgba(22, 48, 31, 0.08);

    /*
     * Importante:
     * no usamos translateX ni contain: paint.
     * Eso evita micro-reajustes entre vistas y
     * permite que el botón + sobresalga sin recortarse.
     */
    transform: none !important;
    contain: none !important;
    overflow: visible !important;
    transition: none !important;
}


.bottom-nav-item,
.bottom-create-wrapper {
    width: 100%;

    height:
        var(--cerdo-bottom-nav-row);

    min-height:
        var(--cerdo-bottom-nav-row);

    max-height:
        var(--cerdo-bottom-nav-row);

    margin: 0;

    box-sizing: border-box;
}


.bottom-nav-item {
    min-width: 0;

    padding: 4px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border: 0;

    background: transparent;

    color:
        #727a75;

    cursor: pointer;

    line-height: 1;

    -webkit-tap-highlight-color:
        transparent;
}


.bottom-nav-item svg {
    display: block;

    width: 23px;
    height: 23px;

    min-width: 23px;
    min-height: 23px;

    flex: 0 0 23px;
}


.bottom-nav-item span {
    display: block;

    height: 11px;
    min-height: 11px;

    margin: 0;

    font-size: 10px;

    font-weight: 700;

    line-height: 11px;

    white-space: nowrap;
}


.bottom-nav-item.active {
    color:
        var(--cerdo-green-700);
}


/* =========================================================
   BOTÓN CENTRAL +
   ========================================================= */

.bottom-create-wrapper {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible !important;
}


.bottom-create-button {
    position: absolute;

    left: 50%;
    bottom: 4px;

    z-index: 2;

    width: 62px;
    height: 62px;

    min-width: 62px;
    min-height: 62px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border:
        5px solid
        #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #159447,
            #087333
        );

    color:
        #ffffff;

    box-shadow:
        0 7px 22px
        rgba(8, 115, 51, 0.30);

    cursor: pointer;

    overflow: visible;

    transform:
        translateX(-50%);

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}


.bottom-create-button span {
    display: block;

    margin: 0;

    font-size: 42px;

    font-weight: 300;

    line-height: 1;

    transform:
        translateY(-2px);

    transition:
        transform 180ms ease;
}


.bottom-create-button[aria-expanded="true"]
span {
    transform:
        translateY(-2px)
        rotate(45deg);
}


.bottom-create-button:active {
    transform:
        translateX(-50%)
        scale(0.95);
}


/* =========================================================
   ESPACIO INFERIOR DEL CONTENIDO
   ========================================================= */

.container {
    padding-bottom:
        110px;
}


/* =========================================================
   20. OVERLAY
   ========================================================= */

.quick-create-overlay {
    position: fixed;

    inset: 0;

    z-index: 1100;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(12, 25, 17, 0.58);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 170ms ease,
        visibility 170ms ease;
}


.quick-create-overlay.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   POP-UP
   ========================================================= */

.quick-create-dialog {
    width:
        min(
            390px,
            100%
        );

    padding:
        20px;

    border:
        1px solid
        rgba(22, 48, 31, 0.10);

    border-radius:
        23px;

    background:
        #ffffff;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.24);

    transform:
        translateY(12px)
        scale(0.97);

    transition:
        transform 180ms ease;
}


.quick-create-overlay.is-open
.quick-create-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   HEADER DEL POP-UP
   ========================================================= */

.quick-create-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom:
        17px;
}


.quick-create-kicker {
    display: block;

    margin-bottom: 4px;

    color:
        var(--cerdo-green-700);

    font-size:
        10px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;
}


.quick-create-header h2 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size:
        21px;

    font-weight:
        850;

    line-height:
        1.2;
}


.quick-create-close {
    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        var(--cerdo-text-secondary);

    cursor: pointer;
}


.quick-create-close svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   OPCIONES
   ========================================================= */

.quick-create-option {
    width: 100%;

    min-height: 78px;

    margin-top:
        10px;

    padding:
        11px 12px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        24px;

    align-items: center;

    gap: 12px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        var(--cerdo-text);

    text-align: left;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}


.quick-create-option:active {
    transform:
        scale(0.985);
}


.quick-create-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius:
        50%;
}


.quick-create-icon svg {
    width: 22px;
    height: 22px;
}


/* PRECIO */

.quick-create-price
.quick-create-icon {
    background:
        #e4f6e8;

    color:
        #259b4c;
}


/* COMPRA */

.quick-create-buy
.quick-create-icon {
    background:
        #e5f1ff;

    color:
        #277bc4;
}


/* VENTA */

.quick-create-sell
.quick-create-icon {
    background:
        #f1e7fb;

    color:
        #8148b7;
}


/* TEXTO */

.quick-create-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.quick-create-copy strong {
    color:
        var(--cerdo-text);

    font-size:
        14px;

    font-weight:
        850;

    line-height:
        1.2;
}


.quick-create-copy small {
    color:
        var(--cerdo-text-secondary);

    font-size:
        11px;

    line-height:
        1.3;
}


.quick-create-arrow {
    color:
        var(--cerdo-text-muted);

    font-size:
        27px;

    font-weight:
        300;

    line-height:
        1;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 430px) {

    .quick-create-overlay {
        padding:
            18px;
    }


    .quick-create-dialog {
        padding:
            17px;

        border-radius:
            21px;
    }


    .quick-create-header h2 {
        font-size:
            20px;
    }


    .quick-create-option {
        min-height:
            73px;

        padding:
            10px;
    }


    .quick-create-icon {
        width:
            43px;

        height:
            43px;
    }

}

/* =========================================================
   21. SISTEMA DE VISTAS
   ========================================================= */

.app-view[hidden] {
    display: none !important;
}


/* =========================================================
   VISTA MERCADO — BASE
   ========================================================= */

.market-page {
    min-height: 420px;

    padding: 24px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        var(--cerdo-radius-lg);

    background:
        var(--cerdo-surface);

    box-shadow:
        var(--cerdo-shadow-sm);
}


.market-page-header {
    max-width: 680px;
}


.market-page-kicker {
    display: block;

    margin-bottom: 6px;

    color:
        var(--cerdo-green-700);

    font-size: 11px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.market-page-header h2 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 32px;

    font-weight: 900;

    line-height: 1.1;
}


.market-page-header p {
    margin-top: 9px;

    color:
        var(--cerdo-text-secondary);

    font-size: 14px;

    line-height: 1.5;
}


@media (max-width: 700px) {

    .market-page {
        padding: 20px 17px;
    }


    .market-page-header h2 {
        font-size: 27px;
    }

}
/* =========================================================
   22. MERCADO — PANTALLA PRINCIPAL
   ========================================================= */

.market-view {
    padding-top: 0;
}


/* HEADER */

.marketplace-header {
    margin:
        -14px -10px 14px;

    padding:
        22px 18px 28px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-950),
            var(--cerdo-green-700)
        );

    color:
        #ffffff;

    border-radius:
        0 0 23px 23px;
}


.marketplace-kicker {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}


.marketplace-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;

    font-weight: 900;

    line-height: 1.05;
}


.marketplace-header p {
    margin-top: 5px;

    color:
        rgba(255,255,255,.82);

    font-size: 12px;
}


.marketplace-header-actions {
    display: flex;

    gap: 8px;
}


.marketplace-icon-button,
.marketplace-filter-button {
    min-height: 44px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.10);

    color:
        #ffffff;

    border-radius: 13px;

    cursor: pointer;
}


.marketplace-icon-button {
    width: 44px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.marketplace-icon-button svg {
    width: 21px;
    height: 21px;
}


.marketplace-filter-button {
    position: relative;

    padding: 0 12px;

    display: flex;

    align-items: center;
    gap: 7px;

    font-size: 12px;

    font-weight: 800;
}


.marketplace-filter-button svg {
    width: 18px;
    height: 18px;
}


.market-filter-count {
    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #ffffff;

    color:
        var(--cerdo-green-800);

    font-size: 10px;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.market-search-panel {
    margin-bottom: 12px;
}


.market-search-box {
    height: 48px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 14px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        var(--cerdo-shadow-sm);
}


.market-search-box svg {
    width: 20px;
    height: 20px;

    color:
        var(--cerdo-text-muted);
}


.market-search-box input {
    flex: 1;

    min-width: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color:
        var(--cerdo-text);

    font-size: 14px;
}


/* =========================================================
   RESUMEN DE FILTROS
   ========================================================= */

.market-filter-summary {
    display: grid;

    grid-template-columns:
        42px minmax(0,1fr) auto;

    align-items: center;

    gap: 11px;

    padding: 12px;

    margin-bottom: 12px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        var(--cerdo-shadow-sm);
}


.market-filter-summary-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-700);
}


.market-filter-summary-icon svg {
    width: 20px;
    height: 20px;
}


.market-filter-summary-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.market-filter-summary-copy strong {
    color:
        var(--cerdo-text);

    font-size: 12px;

    font-weight: 850;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.market-filter-summary-copy span {
    color:
        var(--cerdo-text-secondary);

    font-size: 10.5px;
}


.market-filter-change {
    min-height: 36px;

    padding: 0 11px;

    border: 0;

    border-radius: 10px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-green-800);

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   VENDIENDO / BUSCANDO
   ========================================================= */

.market-type-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 9px;

    margin-bottom: 19px;
}


.market-type-card {
    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px;

    border: 1px solid transparent;

    border-radius: 15px;

    text-align: left;

    cursor: pointer;
}


.market-type-card.selling {
    background:
        linear-gradient(
            135deg,
            #edf9f0,
            #f7fcf8
        );

    color:
        var(--cerdo-green-800);

    border-color:
        #dcefe2;
}


.market-type-card.buying {
    background:
        linear-gradient(
            135deg,
            #f5effb,
            #fbf8fd
        );

    color:
        #7040a3;

    border-color:
        #eadff5;
}


.market-type-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(255,255,255,.72);
}


.market-type-icon svg {
    width: 20px;
    height: 20px;
}


.market-type-card span:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.market-type-card strong {
    font-size: 13px;

    font-weight: 850;
}


.market-type-card small {
    margin-top: 3px;

    color:
        var(--cerdo-text-secondary);

    font-size: 10.5px;
}


/* =========================================================
   SECCIONES DEL MERCADO
   ========================================================= */

.market-list-section {
    margin-bottom: 22px;
}


.market-list-heading {
    margin-bottom: 10px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
}


.market-list-heading h3 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 18px;

    font-weight: 900;
}


.market-list-heading span {
    display: block;

    margin-top: 2px;

    color:
        var(--cerdo-text-muted);

    font-size: 10.5px;
}


.market-see-all {
    padding: 5px 0;

    border: 0;

    background: transparent;

    color:
        var(--cerdo-green-700);

    font-size: 11px;

    font-weight: 850;

    cursor: pointer;
}


/* =========================================================
   LISTA
   ========================================================= */

.market-publication-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* =========================================================
   TARJETA REAL DE PUBLICACIÓN
   La usaremos cuando conectemos Firestore.
   ========================================================= */

.market-publication-card {
    display: grid;

    grid-template-columns:
        50px minmax(0,1fr) auto;

    align-items: center;

    gap: 10px;

    min-height: 84px;

    padding: 11px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        var(--cerdo-shadow-sm);
}


.market-publication-avatar {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-800);

    font-weight: 900;
}


.market-publication-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.market-publication-main {
    min-width: 0;
}


.market-publication-name {
    display: flex;

    align-items: center;

    gap: 5px;

    color:
        var(--cerdo-text);

    font-size: 12px;

    font-weight: 850;
}


.market-publication-location,
.market-publication-details {
    margin-top: 4px;

    color:
        var(--cerdo-text-secondary);

    font-size: 10px;

    line-height: 1.3;
}


.market-publication-price {
    min-width: 82px;

    text-align: right;
}


.market-publication-price strong {
    display: block;

    color:
        var(--cerdo-green-700);

    font-size: 13px;

    font-weight: 900;
}


.market-publication-price small {
    display: block;

    margin-top: 7px;

    color:
        var(--cerdo-text-muted);

    font-size: 9.5px;
}


/* COMPRADORES */

.market-publication-card.buying
.market-publication-avatar {
    background:
        #f0e6f9;

    color:
        #7040a3;
}


.market-publication-card.buying
.market-publication-price strong {
    color:
        #7040a3;
}


/* =========================================================
   ESTADO VACÍO
   ========================================================= */

.market-empty-state {
    padding: 25px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border:
        1px dashed
        #d3dfd7;

    border-radius: 16px;

    background:
        rgba(255,255,255,.65);
}


.market-empty-icon {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background:
        var(--cerdo-green-100);

    font-size: 22px;
}


.market-empty-icon.buyer {
    background:
        #f1e8fa;
}


.market-empty-state strong {
    color:
        var(--cerdo-text);

    font-size: 13px;
}


.market-empty-state p {
    max-width: 250px;

    margin-top: 5px;

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   23. OVERLAY DE FILTROS
   ========================================================= */

.market-filter-overlay {
    position: fixed;

    inset: 0;

    z-index: 1200;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(10, 26, 16, .58);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .17s ease,
        visibility .17s ease;
}


.market-filter-overlay.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.market-filter-dialog {
    width:
        min(
            430px,
            100%
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding: 19px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.25);
}


.market-filter-dialog-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 17px;
}


.market-filter-dialog-header span {
    color:
        var(--cerdo-green-700);

    font-size: 10px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.market-filter-dialog-header h3 {
    margin-top: 3px;

    color:
        var(--cerdo-text);

    font-size: 21px;

    font-weight: 900;
}


.market-filter-close {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 11px;

    background: #ffffff;

    color:
        var(--cerdo-text-secondary);

    font-size: 25px;

    cursor: pointer;
}


/* FORM */

.market-filter-form {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.market-filter-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 10px;
}


.market-filter-field label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    font-weight: 750;
}


.market-filter-field input,
.market-filter-field select {
    width: 100%;

    height: 46px;

    padding: 0 12px;

    border:
        1px solid
        var(--cerdo-border-strong);

    border-radius: 12px;

    background: #ffffff;

    color:
        var(--cerdo-text);

    font-size: 13px;

    outline: none;
}


.market-input-unit {
    position: relative;
}


.market-input-unit input {
    padding-right: 42px;
}


.market-input-unit span {
    position: absolute;

    right: 11px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--cerdo-text-muted);

    font-size: 10px;

    pointer-events: none;
}


.market-filter-actions {
    display: grid;

    grid-template-columns:
        1fr 1.4fr;

    gap: 9px;

    margin-top: 19px;
}


.market-filter-reset,
.market-filter-apply {
    min-height: 47px;

    border-radius: 13px;

    font-size: 13px;

    font-weight: 850;

    cursor: pointer;
}


.market-filter-reset {
    border:
        1px solid
        var(--cerdo-border);

    background: #ffffff;

    color:
        var(--cerdo-text-secondary);
}


.market-filter-apply {
    border: 0;

    background:
        var(--cerdo-green-700);

    color: #ffffff;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 430px) {

    .marketplace-header {
        padding:
            20px 16px 25px;
    }


    .marketplace-header h2 {
        font-size: 26px;
    }


    .market-filter-summary {
        grid-template-columns:
            38px minmax(0,1fr) auto;
    }


    .market-type-card {
        padding: 10px;
    }


    .market-type-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    .market-filter-dialog {
        padding: 17px;
    }

}

/* =========================================================
   24. FORMULARIOS PRIVADOS DEL MERCADO
   ========================================================= */

.create-market-view {
    max-width: 760px;
}


/* CONTENEDOR */

.create-market-page {
    padding-bottom: 20px;
}


/* HEADER */

.create-market-header {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr);

    align-items: start;

    gap: 13px;

    margin-bottom: 19px;
}


.create-market-back {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 13px;

    background: #ffffff;

    color:
        var(--cerdo-text);

    box-shadow:
        var(--cerdo-shadow-sm);

    cursor: pointer;
}


.create-market-back svg {
    width: 21px;
    height: 21px;
}


.create-market-kicker {
    display: block;

    margin-bottom: 4px;

    color:
        var(--cerdo-green-700);

    font-size: 10px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.create-market-header h2 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 27px;

    font-weight: 900;

    line-height: 1.1;
}


.create-market-header p {
    max-width: 530px;

    margin-top: 7px;

    color:
        var(--cerdo-text-secondary);

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.create-market-progress {
    display: grid;

    grid-template-columns:
        auto 1fr auto 1fr auto;

    align-items: start;

    margin-bottom: 18px;

    padding: 0 5px;
}


.create-market-progress-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    color:
        var(--cerdo-text-muted);
}


.create-market-progress-item span {
    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #e9eeea;

    font-size: 11px;

    font-weight: 850;
}


.create-market-progress-item.active span {
    background:
        var(--cerdo-green-700);

    color:
        #ffffff;
}


.create-market-progress-item small {
    font-size: 9px;

    font-weight: 750;
}


.create-market-progress-line {
    height: 2px;

    margin-top: 14px;

    background:
        #dde5df;
}


/* =========================================================
   TARJETAS DEL FORMULARIO
   ========================================================= */

.create-market-form {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.create-form-card {
    padding: 17px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius: 18px;

    background:
        #ffffff;

    box-shadow:
        var(--cerdo-shadow-sm);
}


.create-form-heading {
    display: grid;

    grid-template-columns:
        36px minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    margin-bottom: 16px;
}


.create-form-number {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-800);

    font-size: 13px;

    font-weight: 900;
}


.create-form-heading h3 {
    margin: 0;

    color:
        var(--cerdo-text);

    font-size: 16px;

    font-weight: 900;
}


.create-form-heading p {
    margin-top: 4px;

    color:
        var(--cerdo-text-secondary);

    font-size: 10.5px;

    line-height: 1.4;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.create-form-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.create-field {
    min-width: 0;
}


.create-field-full {
    grid-column:
        1 / -1;
}


.create-field label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    font-weight: 780;
}


.create-field input,
.create-field select,
.create-field textarea {
    width: 100%;

    border:
        1px solid
        var(--cerdo-border-strong);

    border-radius: 12px;

    background:
        #ffffff;

    color:
        var(--cerdo-text);

    outline: none;

    font-size: 13px;
}


.create-field input,
.create-field select {
    height: 46px;

    padding:
        0 12px;
}


.create-field textarea {
    min-height: 100px;

    padding: 12px;

    resize: vertical;

    line-height: 1.45;
}


.create-field input:focus,
.create-field select:focus,
.create-field textarea:focus {
    border-color:
        var(--cerdo-green-600);

    box-shadow:
        0 0 0 3px
        rgba(34, 163, 83, .10);
}


.create-field select:disabled {
    background:
        #f4f6f4;

    color:
        var(--cerdo-text-muted);

    cursor: not-allowed;
}


.create-input-unit {
    position: relative;
}


.create-input-unit input {
    padding-right: 62px;
}


.create-input-unit span {
    position: absolute;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--cerdo-text-muted);

    font-size: 9.5px;

    pointer-events: none;
}


.create-field-help {
    display: block;

    margin-top: 5px;

    color:
        var(--cerdo-text-muted);

    font-size: 9.5px;
}


/* =========================================================
   MATCHING
   ========================================================= */

.buy-match-preview {
    display: grid;

    grid-template-columns:
        45px minmax(0,1fr);

    align-items: center;

    gap: 11px;

    padding: 13px;

    border:
        1px solid
        #d8eadc;

    border-radius: 16px;

    background:
        var(--cerdo-green-50);
}


.buy-match-preview-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-700);
}


.buy-match-preview-icon svg {
    width: 22px;
    height: 22px;
}


.buy-match-preview strong {
    color:
        var(--cerdo-green-900);

    font-size: 12px;

    font-weight: 900;
}


.buy-match-preview p {
    margin-top: 3px;

    color:
        var(--cerdo-text-secondary);

    font-size: 10.5px;

    line-height: 1.4;
}


/* =========================================================
   MENSAJES
   ========================================================= */

.create-form-message {
    padding: 11px 13px;

    border-radius: 12px;

    background:
        #fff5e6;

    color:
        #915d19;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.create-form-actions {
    display: grid;

    grid-template-columns:
        .8fr 1.4fr;

    gap: 9px;

    margin-top: 2px;
}


.create-form-cancel,
.create-form-submit {
    min-height: 49px;

    border-radius: 13px;

    font-size: 13px;

    font-weight: 850;

    cursor: pointer;
}


.create-form-cancel {
    border:
        1px solid
        var(--cerdo-border);

    background:
        #ffffff;

    color:
        var(--cerdo-text-secondary);
}


.create-form-submit {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-800),
            var(--cerdo-green-600)
        );

    color:
        #ffffff;
}


.create-form-submit svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .create-market-header h2 {
        font-size: 24px;
    }


    .create-form-fields {
        grid-template-columns:
            1fr;
    }


    .create-field-full {
        grid-column:
            auto;
    }


    .create-form-card {
        padding: 15px;
    }


    .create-market-progress-item small {
        font-size: 8.5px;
    }

}
/* =========================================================
   25. AJUSTES UX — PUBLICAR COMPRA
   ========================================================= */


/* =========================================================
   CABECERA DE UBICACIÓN
   ========================================================= */

.buy-location-heading {
    grid-template-columns:
        36px
        minmax(0, 1fr)
        auto;

    align-items: center;
}


.buy-location-heading-copy {
    min-width: 0;
}


/* =========================================================
   BOTÓN USAR UBICACIÓN
   ========================================================= */

.buy-detect-location {
    min-height: 38px;

    padding:
        0 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid
        #d6e9da;

    border-radius:
        11px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-green-800);

    font-size:
        10px;

    font-weight:
        850;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.buy-detect-location svg {
    width:
        17px;

    height:
        17px;
}


.buy-detect-location.is-detecting {
    opacity:
        .65;

    pointer-events:
        none;
}


/* =========================================================
   BUSCADOR DE UBICACIÓN
   ========================================================= */

.buy-location-search {
    position:
        relative;

    margin-bottom:
        13px;
}


.buy-location-search > label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--cerdo-text-secondary);

    font-size:
        11px;

    font-weight:
        780;
}


.buy-location-search-box {
    height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 12px;

    border:
        1px solid
        var(--cerdo-border-strong);

    border-radius:
        12px;

    background:
        #ffffff;
}


.buy-location-search-box:focus-within {
    border-color:
        var(--cerdo-green-600);

    box-shadow:
        0 0 0 3px
        rgba(34, 163, 83, .10);
}


.buy-location-search-box svg {
    width:
        19px;

    height:
        19px;

    flex:
        0 0 19px;

    color:
        var(--cerdo-green-700);
}


.buy-location-search-box input {
    width:
        100%;

    min-width:
        0;

    height:
        100%;

    padding:
        0;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--cerdo-text);

    font-size:
        13px;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.buy-location-results {
    position:
        absolute;

    top:
        calc(100% + 5px);

    left:
        0;

    right:
        0;

    z-index:
        50;

    max-height:
        245px;

    overflow-y:
        auto;

    padding:
        5px;

    border:
        1px solid
        var(--cerdo-border);

    border-radius:
        13px;

    background:
        #ffffff;

    box-shadow:
        0 14px 35px
        rgba(18, 46, 27, .16);
}


.buy-location-result {
    width:
        100%;

    padding:
        10px;

    display:
        grid;

    grid-template-columns:
        35px minmax(0, 1fr);

    align-items:
        center;

    gap:
        9px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--cerdo-text);

    text-align:
        left;

    cursor:
        pointer;
}


.buy-location-result:active {
    background:
        var(--cerdo-green-50);
}


.buy-location-result-icon {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--cerdo-green-100);

    color:
        var(--cerdo-green-800);

    font-size:
        16px;
}


.buy-location-result-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.buy-location-result-copy strong {
    overflow:
        hidden;

    color:
        var(--cerdo-text);

    font-size:
        12px;

    font-weight:
        850;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.buy-location-result-copy small {
    overflow:
        hidden;

    color:
        var(--cerdo-text-secondary);

    font-size:
        9.5px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   SEPARADOR
   ========================================================= */

.buy-location-divider {
    margin:
        5px 0 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--cerdo-text-muted);

    font-size:
        9.5px;
}


.buy-location-divider::before,
.buy-location-divider::after {
    content:
        "";

    height:
        1px;

    flex:
        1;

    background:
        var(--cerdo-border);
}


/* =========================================================
   ESTADO UBICACIÓN
   ========================================================= */

.buy-location-status {
    margin-top:
        11px;

    padding:
        9px 11px;

    border-radius:
        10px;

    background:
        var(--cerdo-green-50);

    color:
        var(--cerdo-green-800);

    font-size:
        10.5px;

    line-height:
        1.35;
}


/* =========================================================
   OPCIONAL
   ========================================================= */

.optional-label {
    margin-left:
        4px;

    color:
        var(--cerdo-text-muted);

    font-size:
        9px;

    font-weight:
        650;
}


/* =========================================================
   REDUCIR ESPACIO INFERIOR
   ========================================================= */

.create-market-page {
    min-height:
        auto !important;

    padding-bottom:
        0 !important;
}


.create-market-form {
    min-height:
        auto !important;
}


.create-form-actions {
    margin-top:
        5px;

    margin-bottom:
        8px;
}


#buyPostView {
    min-height:
        auto !important;

    padding-bottom:
        92px !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 500px) {

    .buy-location-heading {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            auto;
    }


    .buy-detect-location {
        width:
            42px;

        height:
            42px;

        min-height:
            42px;

        padding:
            0;

        border-radius:
            12px;
    }


    .buy-detect-location span {
        display:
            none;
    }


    .buy-detect-location svg {
        width:
            20px;

        height:
            20px;
    }

}

/* =========================================================
   26. TECLADO MÓVIL — SIN SALTOS
   ========================================================= */

/*
 * Cuando un input abre el teclado,
 * eliminamos inmediatamente la navegación.
 *
 * No animamos la salida porque la animación era
 * precisamente lo que producía el salto visual.
 */

body.keyboard-open .bottom-navigation {
    display: none !important;
}


/*
 * Neutraliza cualquier transición anterior
 * relacionada con el teclado.
 */

.bottom-navigation {
    transition: none !important;
}

.buy-location-no-results {
    padding: 14px;

    color:
        var(--cerdo-text-secondary);

    font-size: 11px;

    text-align: center;
}


/*
 * Mantener unidades perfectamente centradas.
 */

.create-input-unit {
    position: relative;
    width: 100%;
}


.create-input-unit input {
    width: 100% !important;
    height: 46px !important;

    padding:
        0 66px 0 12px !important;

    border:
        1px solid
        var(--cerdo-border-strong) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    font-size:
        13px !important;
}


.create-input-unit > span {
    position: absolute;

    top: 50%;
    right: 12px;

    transform:
        translateY(-50%);

    margin: 0;

    color:
        var(--cerdo-text-muted);

    font-size:
        10px;

    line-height:
        1;

    pointer-events:
        none;
}
.market-filter-count[hidden] {
    display: none !important;
}

/* =========================================================
   27. AJUSTES FINALES — UBICACIÓN Y ENCABEZADOS
   ========================================================= */

/*
 * El texto del botón del Home permanece siempre igual.
 * Además, fijamos el layout para que "Selecciona tu zona"
 * no salte ni pase a dos líneas durante la detección.
 */

.zone-card .zone-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;
}


.zone-card .zone-heading h2 {
    min-width: 0;

    white-space: nowrap;
}


.zone-card .location-button {
    min-width: 118px;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}


.zone-card .location-button.is-detecting,
.market-filter-change.is-detecting,
.buy-detect-location.is-detecting {
    opacity: .62;

    cursor: wait;
}


/*
 * El resumen de Mercado ya no duplica el botón Filtros.
 * Su acción derecha ahora es "Mi ubicación".
 */

.market-filter-change {
    white-space: nowrap;
}


@media (max-width: 430px) {

    .zone-card .zone-heading h2 {
        font-size: 17px;
    }


    .zone-card .location-button {
        min-width: 112px;

        padding:
            0 8px;

        font-size: 10.5px;
    }

}

/* =========================================================
   28. HOME — ENCABEZADO DE ZONA ESTABLE
   ========================================================= */

.zone-card .zone-heading {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 10px !important;
}

.zone-card .zone-heading h2 {
    min-width: 0;
    white-space: nowrap;
}

.zone-card .location-button {
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
}

.zone-card .location-button.is-detecting {
    opacity: .68;
}

@media (max-width: 430px) {

    .zone-card .zone-heading h2 {
        font-size: 17px !important;
    }

    .zone-card .location-button {
        padding: 0 8px !important;
        font-size: 10.5px !important;
    }
}


/* =========================================================
   29. REPORTAR PRECIO — UBICACIÓN RÁPIDA
   ========================================================= */

.report-location-tools {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

    padding: 11px 12px;

    border:
        1px solid
        var(--cerdo-border, #dfe6e1);

    border-radius: 13px;

    background:
        var(--cerdo-green-50, #f2faf4);
}

.report-location-tools > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.report-location-tools strong {
    color:
        var(--cerdo-text, #17281c);

    font-size: 12px;
    font-weight: 850;
}

.report-location-tools small {
    color:
        var(--cerdo-text-secondary, #5f6d63);

    font-size: 10px;
    line-height: 1.35;
}

.report-location-button {
    min-height: 39px;

    padding: 0 11px;

    border:
        1px solid
        #cfe7d5;

    border-radius: 11px;

    background: #ffffff;

    color:
        var(--cerdo-green-800, #0d5c2d);

    font-size: 10.5px;
    font-weight: 850;

    white-space: nowrap;

    cursor: pointer;
}

.report-location-button.is-detecting {
    opacity: .65;
    pointer-events: none;
}

.report-location-status {
    margin: -2px 0 13px;

    padding: 9px 11px;

    border-radius: 10px;

    background:
        var(--cerdo-green-50, #f2faf4);

    color:
        var(--cerdo-green-800, #0d5c2d);

    font-size: 10.5px;
    line-height: 1.4;
}

@media (max-width: 430px) {

    .report-location-tools {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 8px;

        padding: 10px;
    }

    .report-location-tools small {
        display: none;
    }

    .report-location-button {
        min-height: 38px;
        padding: 0 9px;
        font-size: 10px;
    }
}


/* =========================================================
   31. PUBLICAR COMPRA — REFINAMIENTO VISUAL
   ========================================================= */

.buy-market-page .create-market-header {
    margin-bottom: 17px;
}


.buy-market-page .create-market-back:active {
    transform: scale(.96);
}


.buy-market-progress .create-market-progress-item.active span {
    box-shadow: 0 4px 10px rgba(15, 107, 53, .18);
}


.buy-market-page .create-form-card {
    position: relative;
    overflow: visible;
    border-color: #dbe6de;
    box-shadow:
        0 7px 22px rgba(12, 73, 36, .055);
}


.buy-market-page .create-form-card::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 0;
    width: 3px;
    border-radius: 0 6px 6px 0;
    background: var(--cerdo-green-500);
    opacity: .7;
}


.buy-market-page .create-form-number {
    background:
        linear-gradient(
            145deg,
            var(--cerdo-green-100),
            #f0faf2
        );
    box-shadow: inset 0 0 0 1px #d4e9d9;
}


.buy-market-page .create-field label {
    color: #526258;
    font-weight: 810;
}


.buy-market-page .create-field input,
.buy-market-page .create-field select,
.buy-market-page .create-field textarea,
.buy-market-page .buy-location-search-box {
    border-color: #d8e2da;
    background: #fcfdfc;
}


.buy-market-page .create-field input:focus,
.buy-market-page .create-field select:focus,
.buy-market-page .create-field textarea:focus,
.buy-market-page .buy-location-search-box:focus-within {
    background: #ffffff;
}


.buy-needs-card {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfb 100%
        );
}


.buy-preferences-card {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcfb 100%
        );
}


.buy-open-criteria-note {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin-top: 13px;
    padding: 10px 11px;
    border: 1px solid #dce9df;
    border-radius: 11px;
    background: var(--cerdo-green-50);
    color: var(--cerdo-green-800);
    font-size: 9.7px;
    line-height: 1.45;
}


.buy-open-criteria-note svg {
    width: 17px;
    height: 17px;
}


.buy-market-page .optional-label {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #f0f3f1;
    color: #7a877d;
    font-size: 7.8px;
    font-weight: 750;
    vertical-align: middle;
}


.buy-market-page .buy-match-preview {
    border-color: #cfe5d5;
    background:
        linear-gradient(
            135deg,
            #f3fbf5,
            #eaf7ed
        );
    box-shadow: 0 6px 18px rgba(12, 73, 36, .05);
}


.buy-market-page .buy-match-preview-icon {
    background: #dcefe1;
    box-shadow: inset 0 0 0 1px #cde5d3;
}


.buy-market-page .create-form-cancel:active,
.buy-market-page .create-form-submit:active {
    transform: scale(.98);
}


/* =========================================================
   32. REPORTAR PRECIO — MODAL PROFESIONAL
   ========================================================= */

#modal.modal-overlay {
    padding: 16px;
    background: rgba(9, 24, 14, .64);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


#modal .report-modal {
    width: min(560px, 100%);
    max-height: min(92vh, 820px);
    padding: 0;
    overflow-x: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    background: #f7faf8;
    box-shadow:
        0 28px 80px rgba(5, 24, 12, .32),
        0 4px 18px rgba(5, 24, 12, .14);
    scrollbar-width: thin;
    scrollbar-color: #b9cabe transparent;
}


#modal .report-modal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-900),
            var(--cerdo-green-700)
        );
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(8, 56, 28, .12);
}


.report-modal-title {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}


.report-modal-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
}


.report-modal-icon svg {
    width: 22px;
    height: 22px;
}


.report-modal-title > span:last-child {
    min-width: 0;
}


#modal .report-modal-title small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 8.5px;
    font-weight: 820;
    letter-spacing: .65px;
    text-transform: uppercase;
}


#modal .report-modal-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}


#modal .report-modal-title p {
    max-width: 410px;
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 9.5px;
    line-height: 1.38;
}


#modal .close-button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 21px;
    line-height: 1;
}


#modal .close-button:active {
    transform: scale(.94);
}


.report-price-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 16px;
}


.report-form-section-heading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 1px;
}


.report-form-section-heading > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--cerdo-green-100);
    color: var(--cerdo-green-800);
    box-shadow: inset 0 0 0 1px #d3e8d8;
    font-size: 12px;
    font-weight: 900;
}


.report-form-section-heading strong {
    display: block;
    color: var(--cerdo-text);
    font-size: 14px;
    font-weight: 900;
}


.report-form-section-heading small {
    display: block;
    margin-top: 2px;
    color: var(--cerdo-text-secondary);
    font-size: 9.5px;
    line-height: 1.35;
}


.report-data-heading {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid var(--cerdo-border);
}


#modal .report-location-tools,
#modal .location-search,
#modal .report-location-status,
.report-location-grid,
.report-transparency-note,
#reportValidation,
#reportSummary,
.report-submit-button {
    grid-column: 1 / -1;
}


#modal .report-location-tools {
    margin: 0;
    padding: 11px;
    border-color: #d6e7da;
    background: #f0f8f2;
}


#modal .report-location-button {
    border-color: #c8dfce;
    background: #ffffff;
}


#modal .location-search {
    margin: 0;
}


.report-search-label {
    display: block;
    margin-bottom: 6px;
    color: var(--cerdo-text-secondary);
    font-size: 10.5px;
    font-weight: 800;
}


#modal .location-search input {
    height: 46px;
    padding: 0 13px 0 39px;
    border-color: var(--cerdo-border-strong);
    border-radius: 12px;
    background:
        #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f6b35' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E")
        no-repeat 13px center;
    color: var(--cerdo-text);
    font-size: 12.5px;
}


#modal .location-search input:focus {
    border-color: var(--cerdo-green-600);
    box-shadow: 0 0 0 3px rgba(34, 163, 83, .10);
}


#modal .location-results {
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(18, 46, 27, .16);
}


#modal .report-location-status {
    margin: 0;
}


.report-location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--cerdo-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: var(--cerdo-shadow-sm);
}


.report-field-full {
    grid-column: 1 / -1;
}


#modal .form-group {
    min-width: 0;
    margin: 0;
}


#modal .form-group label,
#modal .report-field-label {
    display: block;
    margin-bottom: 5px;
    color: var(--cerdo-text-secondary);
    font-size: 10.5px;
    font-weight: 810;
}


#modal .form-group input,
#modal .form-group select {
    width: 100%;
    height: 45px;
    padding: 0 11px;
    border-color: var(--cerdo-border-strong);
    border-radius: 11px;
    background-color: #ffffff;
    color: var(--cerdo-text);
    font-size: 12px;
}


#modal .form-group input:focus,
#modal .form-group select:focus {
    border-color: var(--cerdo-green-600);
    box-shadow: 0 0 0 3px rgba(34, 163, 83, .10);
}


.report-price-field,
.report-date-field,
.report-data-heading + .report-price-field + .form-group {
    padding: 12px;
    border: 1px solid var(--cerdo-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: var(--cerdo-shadow-sm);
}


.report-price-input-wrap {
    height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--cerdo-border-strong);
    border-radius: 11px;
    background: #ffffff;
}


.report-price-input-wrap:focus-within {
    border-color: var(--cerdo-green-600);
    box-shadow: 0 0 0 3px rgba(34, 163, 83, .10);
}


.report-price-input-wrap > span {
    color: var(--cerdo-green-800);
    font-size: 12px;
    font-weight: 900;
}


.report-price-input-wrap > em {
    color: var(--cerdo-text-muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
}


#modal .report-price-input-wrap input {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    font-size: 16px;
    font-weight: 850;
}


.report-field-help-box {
    display: block;
    margin-top: 7px;
    padding: 7px 8px;
    border-radius: 9px;
    background: #f5f7f5;
    color: var(--cerdo-text-muted);
    font-size: 8.7px;
    line-height: 1.4;
}


.report-date-display {
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #d8e1da;
    border-radius: 11px;
    background: #eef2ef;
    color: #526057;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}


.report-date-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #dce5de;
    font-size: 16px;
}


.report-date-copy {
    min-width: 0;
}


.report-date-copy small,
.report-date-copy strong {
    display: block;
}


.report-date-copy small {
    margin-bottom: 1px;
    color: #7a877e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}


.report-date-copy strong {
    overflow: hidden;
    color: #3e4b42;
    font-size: 11.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.report-date-lock {
    color: #7b8980;
    font-size: 13px;
}


.report-transparency-note {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 10px 11px;
    border: 1px solid #d8e8dc;
    border-radius: 11px;
    background: var(--cerdo-green-50);
    color: var(--cerdo-green-800);
    font-size: 9.3px;
    line-height: 1.43;
}


.report-transparency-note svg {
    width: 17px;
    height: 17px;
}


#modal .validation-box,
#modal .report-summary {
    margin-top: 0;
    border-radius: 12px;
    font-size: 10.5px;
}


#reportValidation:empty,
#reportSummary:empty {
    display: none;
}


#modal .report-submit-button {
    position: static;
    min-height: 49px;
    display: none !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--cerdo-green-800),
            var(--cerdo-green-600)
        );
    font-size: 13px;
    font-weight: 880;
    box-shadow: 0 7px 17px rgba(13, 92, 45, .18);
}


#modal .report-submit-button.is-ready {
    display: flex !important;
}


.report-submit-button svg {
    width: 18px;
    height: 18px;
}


.report-submit-button:active {
    transform: scale(.985);
}


@media (max-width: 600px) {

    #modal.modal-overlay {
        align-items: flex-end;
        padding: 0;
    }


    #modal .report-modal {
        width: 100%;
        max-height: 94vh;
        border: 0;
        border-radius: 22px 22px 0 0;
    }


    #modal .report-modal-header {
        padding: 15px;
    }


    .report-modal-title {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 9px;
    }


    .report-modal-icon {
        width: 39px;
        height: 39px;
    }


    #modal .report-modal-title h3 {
        font-size: 18px;
    }


    #modal .report-modal-title p {
        font-size: 8.8px;
    }


    .report-price-form {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    }


    .report-form-section-heading,
    #modal .report-location-tools,
    #modal .location-search,
    #modal .report-location-status,
    .report-location-grid,
    .report-transparency-note,
    #reportValidation,
    #reportSummary,
    .report-submit-button {
        grid-column: auto;
    }


    .report-price-field,
    .report-date-field,
    .report-data-heading + .report-price-field + .form-group {
        grid-column: auto;
    }

}


@media (max-width: 430px) {

    #modal .report-location-tools {
        grid-template-columns: minmax(0, 1fr) auto;
    }


    #modal .report-location-button {
        min-height: 39px;
        padding: 0 9px;
        font-size: 9px;
    }


    .report-location-grid {
        grid-template-columns: 1fr;
    }


    .report-field-full {
        grid-column: auto;
    }

}


/*
 * En Android la navegación inferior es fija y puede cubrir el final del
 * formulario. Este espacio permite desplazar el botón completamente por
 * encima de la barra, sin convertirlo otra vez en un elemento flotante.
 */
html.cerdo-native-app #modal .report-price-form {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
}


html.cerdo-native-app #modal .report-modal {
    scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom));
}


/* =========================================================
   33. HOME — JERARQUÍA VISUAL TIPO PUBLICAR
   ========================================================= */

.home-card-heading {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}


.home-card-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4e8d9;
    border-radius: 11px;
    background: var(--cerdo-green-100);
    color: var(--cerdo-green-800);
}


.home-card-icon svg {
    width: 20px;
    height: 20px;
}


.home-card-heading-copy {
    min-width: 0;
}


.home-card-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--cerdo-green-700);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .65px;
    line-height: 1.2;
    text-transform: uppercase;
}


.home-card-heading-copy h2,
.home-card-heading-copy .section-title {
    margin: 0;
    color: var(--cerdo-text);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.15px;
    line-height: 1.2;
}


.home-card-heading-copy p,
.home-card-heading-copy .section-subtitle {
    margin: 3px 0 0;
    color: var(--cerdo-text-secondary);
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   REFERENCIA PRINCIPAL — TARJETA COMPACTA
   ========================================================= */

.hero.market-hero.home-reference-card {
    position: relative;
    margin-bottom: 12px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--cerdo-border);
    border-top: 3px solid var(--cerdo-green-700);
    border-radius: 18px;
    background: #ffffff;
    color: var(--cerdo-text);
    text-align: left;
    box-shadow: var(--cerdo-shadow-sm);
}


.home-reference-card::after {
    content: "";
    position: absolute;
    top: -54px;
    right: -58px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(34, 163, 83, .035);
    pointer-events: none;
}


.home-reference-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--cerdo-border);
}


.home-live-badge {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #d4ead9;
    border-radius: 999px;
    background: var(--cerdo-green-50);
    color: var(--cerdo-green-800);
    font-size: 9px;
    font-weight: 820;
    white-space: nowrap;
}


.home-live-badge i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--cerdo-green-500);
    box-shadow: 0 0 0 3px rgba(34, 163, 83, .12);
}


.home-reference-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(165px, .48fr);
    align-items: stretch;
    gap: 14px;
    padding: 14px 0;
}


.home-reference-location {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.home-reference-card .market-hero-label {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 9px;
    padding: 0 8px;
    border: 1px solid #dce9df;
    border-radius: 999px;
    background: #f7faf8;
    color: var(--cerdo-text-secondary);
    font-size: 9px;
    font-weight: 780;
}


.home-reference-card .market-hero-pin {
    width: 14px;
    height: 14px;
    display: inline-flex;
    color: var(--cerdo-green-700);
}


.home-reference-card .market-hero-pin svg {
    width: 14px;
    height: 14px;
}


.home-reference-card .selected-place {
    max-width: 100%;
    margin: 0 0 3px;
    overflow-wrap: anywhere;
    color: var(--cerdo-text);
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 900;
    letter-spacing: -.4px;
    line-height: 1.1;
}


.home-reference-card .selected-province {
    margin: 0;
    color: var(--cerdo-text-muted);
    font-size: 11px;
    line-height: 1.35;
}


.home-reference-card .market-price-block {
    min-width: 0;
    min-height: 125px;
    margin: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 15px;
    background:
        linear-gradient(
            140deg,
            var(--cerdo-green-900),
            var(--cerdo-green-700)
        );
    color: #ffffff;
    box-shadow: 0 9px 22px rgba(8, 72, 34, .14);
}


.home-reference-card .market-price-label {
    margin: 0 0 7px;
    color: rgba(255, 255, 255, .7);
    font-size: 8.5px;
    font-weight: 820;
    letter-spacing: .55px;
    line-height: 1.2;
    text-transform: uppercase;
}


.home-reference-card .main-price {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(29px, 5vw, 39px);
    font-weight: 900;
    letter-spacing: -.8px;
    line-height: 1;
}


.home-reference-card .main-price[data-state="loading"],
.home-reference-card .main-price[data-state="empty"],
.home-reference-card .main-price[data-state="error"] {
    font-size: 18px;
    letter-spacing: -.2px;
    line-height: 1.15;
}


.home-reference-card .main-unit {
    margin-top: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: 9.5px;
    font-weight: 720;
}


.market-price-caption {
    margin-top: 9px;
    padding-top: 8px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .62);
    font-size: 8.5px;
    line-height: 1.25;
}


.home-reference-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cerdo-border);
}


.home-reference-card .main-meta {
    min-width: 0;
    margin: 0;
    color: var(--cerdo-text-secondary);
    font-size: 10px;
    line-height: 1.4;
}


.home-reference-card .change-zone-button {
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #cfe3d4;
    border-radius: 11px;
    background: var(--cerdo-green-50);
    color: var(--cerdo-green-800);
    font-size: 10.5px;
    font-weight: 830;
    box-shadow: none;
}


.home-reference-card .change-zone-button svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   SELECTOR Y LECTURA — MISMO SISTEMA DE TARJETAS
   ========================================================= */

#homeView .zone-card,
#homeView .market-reading-section,
#homeView > .section {
    border: 1px solid var(--cerdo-border);
    border-top: 3px solid var(--cerdo-green-700);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--cerdo-shadow-sm);
}


#homeView .zone-card {
    padding: 16px;
}


#homeView .zone-card .zone-heading {
    align-items: center;
    margin-bottom: 14px;
}


#homeView .zone-card .zone-heading h2 {
    margin: 0;
    font-size: 17px;
}


#homeView .zone-card .location-button {
    min-height: 39px;
    border-radius: 11px;
    font-size: 10.5px;
}


#homeView .zone-card .selection-message {
    margin-top: 11px;
    border: 1px solid #dbeadd;
    background: var(--cerdo-green-50);
    font-size: 10px;
}


#homeView .market-reading-section {
    margin-top: 12px;
    padding: 16px;
}


#homeView .market-reading-header {
    align-items: center;
    margin-bottom: 13px;
}


#homeView .market-reading-heading {
    align-items: center;
}


#homeView .market-reading-heading-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border: 1px solid #d4e8d9;
    border-radius: 11px;
}


#homeView .market-reading-heading-icon svg {
    width: 20px;
    height: 20px;
}


#homeView .market-reading-section .section-title {
    font-size: 17px;
}


#homeView .market-reading-section .market-card {
    min-height: 118px;
    padding: 12px;
    border-radius: 14px;
    background: var(--cerdo-surface-soft);
    box-shadow: none;
}


#homeView .market-card-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}


#homeView .market-card-icon svg {
    width: 16px;
    height: 16px;
}


#homeView .market-reading-section .market-value {
    margin-top: 13px;
    font-size: 22px;
}


#homeView .stats {
    gap: 8px;
    margin: 12px 0;
}


#homeView .stat-card {
    min-height: 96px;
    padding: 11px 8px;
    border-radius: 14px;
    box-shadow: none;
}


#homeView .stat-card .stat-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    font-size: 16px;
}


#homeView .stat-card .stat-number {
    font-size: 21px;
}


#homeView > .section {
    margin-top: 12px;
    padding: 16px;
}


.home-section-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}


#homeView .home-section-heading .section-title,
#homeView .home-section-heading .section-subtitle {
    margin: 0;
}


#homeView .filters {
    margin-top: 0;
}


#homeView .about-section .info-box {
    margin-top: 0;
    border: 1px solid #dbeadd;
    border-radius: 13px;
    background: var(--cerdo-green-50);
    color: var(--cerdo-text-secondary);
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   HOME — MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .hero.market-hero.home-reference-card,
    #homeView .zone-card,
    #homeView .market-reading-section,
    #homeView > .section {
        padding: 14px;
    }


    .home-reference-body {
        grid-template-columns: minmax(0, 1fr) 138px;
        gap: 10px;
        padding: 12px 0;
    }


    .home-reference-card .market-price-block {
        min-height: 118px;
        padding: 12px;
    }


    .home-reference-card .main-price {
        font-size: 30px;
    }


    .home-reference-card .selected-place {
        font-size: 21px;
    }


    #homeView .zone-card .location-fields {
        gap: 8px;
    }


    #homeView .market-reading-section .market-dashboard {
        gap: 8px;
    }

}


@media (max-width: 430px) {

    .home-card-heading {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }


    .home-card-icon,
    #homeView .market-reading-heading-icon {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        border-radius: 10px;
    }


    .home-card-heading-copy h2,
    .home-card-heading-copy .section-title,
    #homeView .zone-card .zone-heading h2,
    #homeView .market-reading-section .section-title {
        font-size: 15.5px;
    }


    .home-card-heading-copy p,
    .home-card-heading-copy .section-subtitle {
        font-size: 9px;
    }


    .home-live-badge {
        min-height: 27px;
        padding: 0 7px;
        font-size: 8px;
    }


    .home-reference-body {
        grid-template-columns: minmax(0, 1fr) 126px;
    }


    .home-reference-card .market-hero-label {
        font-size: 8px;
    }


    .home-reference-card .selected-place {
        font-size: 19px;
    }


    .home-reference-card .selected-province {
        font-size: 9.5px;
    }


    .home-reference-card .market-price-block {
        min-height: 112px;
        padding: 10px;
    }


    .home-reference-card .main-price {
        font-size: 27px;
    }


    .home-reference-card .main-unit,
    .market-price-caption {
        font-size: 8px;
    }


    .home-reference-footer {
        gap: 8px;
    }


    .home-reference-card .main-meta {
        font-size: 9px;
    }


    .home-reference-card .change-zone-button {
        min-height: 36px;
        padding: 0 9px;
        font-size: 9px;
    }


    #homeView .market-reading-section .market-card {
        min-height: 108px;
        padding: 10px;
    }


    #homeView .market-reading-section .market-value {
        font-size: 20px;
    }

}


@media (max-width: 370px) {

    .home-reference-heading {
        align-items: flex-start;
    }


    .home-live-badge {
        width: 28px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }


    .home-reference-body {
        grid-template-columns: minmax(0, 1fr) 116px;
        gap: 8px;
    }


    #homeView .zone-card .zone-heading {
        display: grid;
        grid-template-columns: 1fr;
    }


    #homeView .zone-card .location-button {
        width: 100%;
    }

}


/* =========================================================
   34. TARJETA PRINCIPAL — REFERENCIA EXACTA COMPACTA
   ========================================================= */

.hero.market-hero.exact-market-card {
    position: relative;
    min-height: 0;
    margin-bottom: 12px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            #07512a 0%,
            #086334 58%,
            #08713b 100%
        );
    color: #ffffff;
    text-align: left;
    box-shadow:
        0 12px 28px rgba(7, 74, 36, .16),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}


.exact-market-card::before {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -92px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    pointer-events: none;
}


.exact-market-location {
    position: relative;
    z-index: 1;
    margin-top: 0;
}


.hero.market-hero.exact-market-card .selected-place {
    max-width: 100%;
    margin: 0 0 2px;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 900;
    letter-spacing: -.45px;
    line-height: 1.08;
}


.hero.market-hero.exact-market-card .selected-province {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 10.5px;
    line-height: 1.3;
}


.exact-market-price-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 580px) 74px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
}


.hero.market-hero.exact-market-card .market-price-block {
    min-width: 0;
    min-height: 74px;
    margin: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .19);
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


.hero.market-hero.exact-market-card .market-price-label {
    margin: 0 0 5px;
    color: rgba(255, 255, 255, .64);
    font-size: 8px;
    font-weight: 860;
    letter-spacing: .55px;
    line-height: 1.1;
    text-transform: uppercase;
}


.exact-market-price-line {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}


.hero.market-hero.exact-market-card .main-price {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(31px, 5.4vw, 43px);
    font-weight: 920;
    letter-spacing: -1px;
    line-height: .92;
}


.hero.market-hero.exact-market-card .main-price[data-state="loading"],
.hero.market-hero.exact-market-card .main-price[data-state="empty"],
.hero.market-hero.exact-market-card .main-price[data-state="error"] {
    font-size: 17px;
    letter-spacing: -.2px;
    line-height: 1.1;
}


.hero.market-hero.exact-market-card .main-unit {
    flex: 1 1 auto;
    margin: 0 0 1px;
    color: rgba(255, 255, 255, .67);
    font-size: 8.5px;
    font-weight: 680;
    line-height: 1.25;
}


.exact-market-pig {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .075);
}


.exact-market-pig span {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    background: linear-gradient(145deg, #ffd6e0, #efacc0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .13);
    font-size: 31px;
    line-height: 1;
    transform: rotate(3deg);
}


.hero.market-hero.exact-market-card .main-meta {
    position: relative;
    z-index: 1;
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .69);
    font-size: 10px;
    line-height: 1.3;
}


@media (max-width: 700px) {

    .hero.market-hero.exact-market-card {
        padding: 14px;
        border-radius: 19px;
    }


    .exact-market-price-row {
        grid-template-columns: minmax(0, 1fr) 67px;
        gap: 10px;
    }


    .exact-market-pig {
        width: 67px;
        height: 67px;
    }


    .exact-market-pig span {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 28px;
    }


    .hero.market-hero.exact-market-card .main-price {
        font-size: 34px;
    }

}


@media (max-width: 430px) {

    .hero.market-hero.exact-market-card .selected-place {
        font-size: 24px;
    }


    .hero.market-hero.exact-market-card .market-price-block {
        min-height: 70px;
        padding: 9px 10px;
    }


    .hero.market-hero.exact-market-card .main-price {
        font-size: 31px;
    }


    .hero.market-hero.exact-market-card .main-unit {
        font-size: 7.7px;
    }


    .hero.market-hero.exact-market-card .main-meta {
        font-size: 9.5px;
    }

}


@media (max-width: 360px) {

    .exact-market-price-row {
        grid-template-columns: minmax(0, 1fr) 58px;
        gap: 8px;
    }


    .exact-market-pig {
        width: 58px;
        height: 58px;
    }


    .exact-market-pig span {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 24px;
    }


    .hero.market-hero.exact-market-card .main-price {
        font-size: 28px;
    }


    .exact-market-price-line {
        gap: 7px;
    }

}


/* =========================================================
   CERDO RD V9 — HOME, CONTACTO Y CONSISTENCIA ENTRE TELÉFONOS
   ========================================================= */

#homeView > .home-market-preview {
    order: 3;
}

#homeView > .stats {
    order: 4;
    margin-top: 12px;
}

#homeView > .home-zone-prices-section {
    order: 5;
}

#homeView .home-market-preview {
    padding: 15px;
}

#homeView .home-market-preview-heading {
    margin-bottom: 12px;
}

#homeView .home-market-interwoven-list {
    width: 100%;
    max-height: none;
    margin-top: 0;
    padding: 3px;
    gap: 10px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    overscroll-behavior: auto;
}

#homeView .home-market-interwoven-list .market-live-card {
    width: 100%;
}

#homeView .home-market-interwoven-list > .market-empty-state {
    min-height: 140px;
}

.market-interwoven-order {
    display: inline-flex;
}

.contact-options-dialog {
    width: min(420px, calc(100% - 24px));
}

.contact-options-card {
    padding: 18px;
    text-align: left;
}

.contact-options-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-options-topline time {
    color: #748178;
    font-size: 11px;
    font-weight: 720;
    text-align: right;
}

.contact-options-dialog[data-post-type="buy"] .contact-options-kicker {
    color: #7b44a5;
}

.contact-options-card h2 {
    margin: 7px 0 13px;
    text-align: left;
}

.contact-post-summary {
    padding: 14px;
    border: 1px solid #d6e8dc;
    border-left: 4px solid #158044;
    border-radius: 16px;
    background: #f8fcf9;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary {
    border-color: #e6d9ef;
    border-left-color: #7b44a5;
    background: #fcf9fe;
}

.contact-post-summary > strong,
.contact-post-summary > b {
    display: block;
}

.contact-post-summary > strong {
    color: #183d27;
    font-size: 15px;
    line-height: 1.3;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary > strong {
    color: #44304f;
}

.contact-post-summary > b {
    margin-top: 6px;
    color: #11743d;
    font-size: 19px;
    line-height: 1.2;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary > b {
    color: #7b44a5;
}

.contact-post-summary dl {
    display: grid;
    gap: 8px;
    margin: 13px 0 0;
}

.contact-post-summary dl > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 9px;
    padding-top: 8px;
    border-top: 1px solid rgb(22 102 54 / 10%);
}

.contact-post-summary dt,
.contact-post-summary dd {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
}

.contact-post-summary dt {
    color: #6b796f;
    font-weight: 750;
}

.contact-post-summary dd {
    overflow-wrap: anywhere;
    color: #294836;
    font-weight: 700;
}

.contact-options-card .contact-options-notice {
    margin: 13px 2px 5px;
    color: #607167;
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
}

.contact-options-card button {
    text-align: center;
}

@media (max-width: 430px) {
    #homeView .home-market-preview {
        padding: 13px;
    }

    #homeView .home-market-preview-heading {
        align-items: center;
    }

    #homeView .home-market-preview-heading .home-card-heading-copy p {
        display: block;
        font-size: 10px;
    }

    .contact-options-card {
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .market-interwoven-order {
        display: inline-flex;
        max-width: 82px;
        padding-inline: 7px;
        font-size: 7.5px;
    }

    .contact-post-summary dl > div {
        grid-template-columns: 74px minmax(0, 1fr);
    }
}

/* =========================================================
   MI CUENTA — estilos aislados. Sin bloqueos globales de scroll.
   ========================================================= */
.cr-auth-dialog {
    box-sizing: border-box;
    width: min(460px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    padding: 0;
    border: 1px solid #d6e4da;
    border-radius: 24px;
    color: #193325;
    background: #f6faf7;
    box-shadow: 0 20px 64px rgb(7 49 27 / 26%);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: inherit;
    line-height: 1.5;
}
.cr-auth-dialog:not([open]),
.cr-auth-dialog [hidden] { display: none !important; }
.cr-auth-dialog *, .cr-auth-dialog *::before, .cr-auth-dialog *::after { box-sizing: border-box; }
.cr-auth-dialog::backdrop { background: rgb(11 34 23 / 56%); }
.cr-auth-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 20px;
    color: #fff;
    background: linear-gradient(125deg, #0b4828, #147840);
}
.cr-auth-kicker { display: block; color: #d0eed9; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; }
.cr-auth-dialog .cr-auth-header h2 { margin: 5px 0 0; color: #fff; font-size: 27px; line-height: 1.2; }
.cr-auth-dialog .cr-auth-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 14px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.cr-auth-content { padding: 20px; }
.cr-auth-dialog p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.cr-auth-dialog .cr-auth-intro { color: #4e6556; }
.cr-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid #d8e6dc; border-radius: 14px; background: #eaf3ed; }
.cr-auth-tabs button {
    min-height: 44px;
    padding: 10px 8px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 750;
    color: #45624f;
    background: transparent;
    cursor: pointer;
}
.cr-auth-tabs button[aria-pressed="true"] { color: #0e6835; background: #fff; box-shadow: 0 2px 6px rgb(12 65 32 / 8%); }
.cr-auth-dialog .cr-auth-button {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 10px 0 0;
    padding: 12px 16px;
    border: 1px solid #bbd7c5;
    border-radius: 14px;
    background: #fff;
    color: #125c32;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    text-align: center;
    cursor: pointer;
    white-space: normal;
}
.cr-auth-dialog .cr-auth-primary { border-color: #126633; background: #126633; color: #fff; }
.cr-auth-dialog .cr-auth-google { margin: 0; color: #263c2e; background: #fff; }
.cr-auth-dialog .cr-auth-divider { margin: 16px 0; text-align: center; color: #617568; font-size: 12px; }
.cr-auth-dialog .cr-auth-field { display: grid; gap: 7px; margin: 0 0 15px; color: #2a4834; font-size: 14px; font-weight: 700; }
.cr-auth-dialog input:not([type="checkbox"]), .cr-auth-dialog select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #c4d3c9;
    border-radius: 12px;
    color: #203a2a;
    background: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
}
.cr-auth-dialog .cr-auth-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0 8px; color: #4d6154; font-size: 14px; font-weight: 500; }
.cr-auth-dialog .cr-auth-check input { width: 20px; height: 20px; margin: 0; accent-color: #126633; }
.cr-auth-dialog .cr-auth-link { display: block; min-height: 44px; margin: 8px auto; padding: 10px 8px; border: 0; border-radius: 10px; color: #126633; background: transparent; font: inherit; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.cr-auth-dialog .cr-auth-danger { color: #a6372a; }
.cr-auth-dialog .cr-auth-help { margin: 6px 0 0; color: #586e60; font-size: 12px; font-weight: 400; }
.cr-auth-card { margin: 0 0 14px; padding: 17px; border: 1px solid #dbe7df; border-radius: 18px; background: #fff; }
.cr-auth-dialog .cr-auth-card h3 { margin: 0 0 8px; font-size: 17px; color: #183e27; }
.cr-auth-card .cr-auth-field { margin-bottom: 0; }
.cr-auth-label { display: block; margin-bottom: 4px; color: #5c7565; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.cr-auth-email { display: block; margin-bottom: 10px; font-size: 17px; overflow-wrap: anywhere; }
.cr-auth-badge { display: inline-block; padding: 5px 9px; border-radius: 8px; color: #7b4b09; background: #fff1d5; font-size: 12px; font-weight: 700; }
.cr-auth-badge.is-verified { color: #155d32; background: #e1f3e7; }
.cr-auth-dialog .cr-auth-message { margin-bottom: 16px; padding: 12px 14px; border: 1px solid #bdddc9; border-radius: 12px; color: #194e2e; background: #e9f6ee; overflow-wrap: anywhere; }
.cr-auth-dialog .cr-auth-message.is-error { color: #8d3026; border-color: #efc8c2; background: #fff0ed; }
.cr-auth-dialog .cr-auth-footnote { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #dbe7df; color: #637568; font-size: 11px; }
.cr-auth-dialog :is(button, input, select):focus-visible { outline: 3px solid #42a965; outline-offset: 3px; }
.cr-auth-dialog :disabled { opacity: .6; cursor: wait; }
@media (max-width: 360px) {
    .cr-auth-content { padding: 16px; }
    .cr-auth-header { padding: 18px 16px; }
    .cr-auth-dialog .cr-auth-header h2 { font-size: 24px; }
}

/* Cuenta v3: mensajes en contexto, verificación compacta y ojos por campo. */
.cr-auth-content { padding: 16px 18px; }
.cr-auth-header { padding: 18px; }
.cr-auth-dialog .cr-auth-header h2 { font-size: 24px; }
.cr-auth-dialog .cr-auth-intro { margin-bottom: 12px; font-size: 13px; }
.cr-auth-tabs { margin-bottom: 14px; }
.cr-auth-dialog .cr-auth-field { gap: 5px; margin-bottom: 12px; }
.cr-auth-field > label { display: block; margin: 0; font-size: 14px; font-weight: 700; color: #2a4834; }
.cr-auth-password-wrap { position: relative; }
.cr-auth-dialog .cr-auth-password-wrap input { padding-right: 52px; }
.cr-auth-dialog .cr-auth-eye {
    position: absolute;
    right: 3px;
    top: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #56695c;
    cursor: pointer;
}
.cr-auth-eye svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-auth-eye .cr-auth-eye-slash { display: none; }
.cr-auth-eye[aria-pressed="true"] .cr-auth-eye-slash { display: block; }
.cr-auth-dialog .cr-auth-field-error { margin: 0; color: #b42318; font-size: 12px; font-weight: 500; line-height: 1.4; }
.cr-auth-dialog input[aria-invalid="true"] { border-color: #c83426; background: #fffafa; }
.cr-auth-dialog .cr-auth-message { margin: 10px 0; padding: 10px 12px; font-size: 13px; font-weight: 500; }
.cr-auth-dialog .cr-auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px;
    border: 1px solid #747775;
    border-radius: 24px;
    background: #fff;
    color: #1f1f1f;
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.cr-auth-google img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.cr-auth-google:hover { background: #f8faff; box-shadow: 0 1px 3px rgb(60 64 67 / 20%); }
.cr-auth-google:active { background: #edf3fc; }
#crAuthVerification { text-align: center; padding: 18px 16px; margin-bottom: 10px; }
.cr-auth-mail-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 16px; color: #17663b; background: #e7f4ec; font-size: 27px; }
#crAuthVerification .cr-auth-email { font-size: 14px; margin: 3px 0 12px; }
#crAuthVerification .cr-auth-message { text-align: left; }
#crAuthLinkGooglePanel summary { min-height: 32px; color: #185e35; font-size: 14px; font-weight: 700; cursor: pointer; }
#crAuthLinkGooglePanel form { margin-top: 12px; }
#publicAccountButton { position: relative; }
#publicAccountButton.is-signed-in::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border: 2px solid #0d6736; border-radius: 50%; background: #a6f5bf; }
.price-explorer-note { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #edf6f0; color: #41634c; font-size: 13px; line-height: 1.5; }
.price-explorer-summary { display: block; margin-top: 4px; color: #1a5a32; font-weight: 700; }
#priceProvinceFilter { width: 100%; }
#homeView .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 90px; }
#homeView .filters .field { min-width: 0; }
@media (max-width: 700px) {
    #homeView .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #homeView .filters .field:nth-child(-n+2) { grid-column: 1 / -1; }
}

/* =========================================================
   CUENTA · DISEÑO A APROBADO
   Encabezado verde, cuerpo blanco y controles compactos.
   Solo afecta al diálogo; no bloquea el scroll de otras vistas.
   ========================================================= */
.cr-auth-dialog.cr-auth-design-a {
    color-scheme: light;
    width: min(348px, calc(100% - 28px));
    border-color: #e0e3e6;
    border-radius: 22px;
    color: #25282b;
    background: #fff;
    box-shadow: 0 18px 56px rgb(0 0 0 / 20%);
}
.cr-auth-design-a::backdrop { background: rgb(20 25 22 / 48%); }
.cr-auth-design-a .cr-auth-header {
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 18px;
    color: #fff;
    background: #186b3b;
}
.cr-auth-design-a .cr-auth-brand { color: #fff; font-size: 16px; font-weight: 700; }
.cr-auth-design-a .cr-auth-header-actions { display: flex; align-items: center; gap: 4px; }
.cr-auth-design-a .cr-auth-header-caption { color: #e6f2eb; font-size: 12px; }
.cr-auth-design-a .cr-auth-close { border: 0; background: transparent; font-size: 26px; }
.cr-auth-design-a .cr-auth-content { padding: 16px; }
.cr-auth-design-a .cr-auth-title { margin: 0 0 6px; color: #25282b; font-size: 23px; font-weight: 700; line-height: 1.25; }
.cr-auth-design-a .cr-auth-intro { margin: 0 0 12px; color: #62676d; font-size: 13px; }
.cr-auth-design-a .cr-auth-tabs { margin: 0 0 14px; padding: 4px; border-color: #e0e3e6; border-radius: 12px; background: #f6f6f7; }
.cr-auth-design-a .cr-auth-tabs button { min-height: 44px; padding: 8px 6px; border-radius: 8px; color: #62676d; font-size: 13px; font-weight: 600; }
.cr-auth-design-a .cr-auth-tabs button[aria-pressed="true"] { color: #25282b; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 5%); }
.cr-auth-design-a .cr-auth-divider { display: flex; align-items: center; gap: 10px; margin: 13px 0; color: #62676d; font-size: 12px; }
.cr-auth-design-a .cr-auth-divider::before,
.cr-auth-design-a .cr-auth-divider::after { content: ""; height: 1px; flex: 1; background: #e0e3e6; }
.cr-auth-design-a .cr-auth-field { gap: 6px; margin-bottom: 12px; color: #25282b; }
.cr-auth-design-a .cr-auth-field > label { color: #25282b; font-size: 13px; font-weight: 600; }
.cr-auth-design-a input:not([type="checkbox"]) { min-height: 46px; padding: 11px 12px; border-color: #e0e3e6; border-radius: 11px; color: #25282b; background: #fff; font-size: 16px; }
.cr-auth-design-a .cr-auth-password-wrap input { padding-right: 52px; }
.cr-auth-design-a .cr-auth-eye { top: 1px; right: 1px; color: #62676d; }
.cr-auth-design-a .cr-auth-field-error { color: #b42318; }
.cr-auth-design-a input[aria-invalid="true"] { border-color: #b42318; background: #fff5f3; }
.cr-auth-design-a .cr-auth-button { min-height: 48px; padding: 12px; border-color: #e0e3e6; border-radius: 12px; color: #25282b; background: #fff; font-size: 15px; font-weight: 600; }
.cr-auth-design-a .cr-auth-primary { border-color: #18703c; color: #fff; background: #18703c; }
.cr-auth-design-a .cr-auth-google { display: flex; border-color: #747775; border-radius: 24px; color: #1f1f1f; background: #fff; font-size: 14px; font-weight: 500; }
.cr-auth-design-a .cr-auth-google:hover { background: #f8faff; }
.cr-auth-design-a .cr-auth-link { min-height: 44px; margin: 6px auto 0; padding: 9px 8px; color: #25282b; font-size: 13px; }
.cr-auth-design-a .cr-auth-danger { color: #a6372a; }
.cr-auth-design-a .cr-auth-help { color: #62676d; font-size: 12px; }
.cr-auth-design-a .cr-auth-guest-help { margin-top: 10px; padding-top: 12px; border-top: 1px solid #e0e3e6; text-align: center; }
.cr-auth-design-a .cr-auth-card { margin-bottom: 12px; padding: 14px; border-color: #e0e3e6; border-radius: 14px; background: #fff; }
.cr-auth-design-a .cr-auth-label { color: #62676d; }
.cr-auth-design-a .cr-auth-email { color: #25282b; font-size: 15px; }
.cr-auth-design-a .cr-auth-badge.is-verified { color: #186b3b; background: #f3f8f5; }
.cr-auth-design-a .cr-auth-message { margin: 10px 0; border-color: #d9e5de; color: #186b3b; background: #f7faf8; }
.cr-auth-design-a .cr-auth-message.is-error { border-color: #efd3cd; color: #b42318; background: #fff5f3; }
.cr-auth-design-a[data-account-state="verify"] .cr-auth-title { text-align: center; }
.cr-auth-design-a #crAuthVerification { padding: 8px 0 0; border: 0; background: #fff; }
.cr-auth-design-a .cr-auth-mail-icon { width: 48px; height: 48px; color: #186b3b; border: 1px solid #e0e3e6; background: #fff; }
.cr-auth-design-a #crAuthLinkGooglePanel summary { min-height: 44px; color: #25282b; line-height: 1.5; }
.cr-auth-design-a :is(button, input, select):focus-visible { outline-color: #186b3b; }

/* Contexto secundario dentro de la tabla de zonas. */
#homeView .price-row-context {
    display: block;
    margin-top: 3px;
    color: #6b7b70;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* =========================================================
   HOME FINAL · ENCABEZADO
   ========================================================= */

/* El acceso administrativo solo existe después de validar el rol. */
.app-header .admin-button[hidden] {
    display: none !important;
}

/* Perfil para invitados; Salir para cualquier cuenta registrada. */
.app-header .header-icon-button[hidden] {
    display: none !important;
}

.app-header .header-logout-button {
    cursor: pointer;
}

.app-header .header-logout-button:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.app-header .header-logout-button:active {
    transform: scale(0.97);
}

.app-header .header-logout-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* Confirmación compacta: tocar el icono nunca cierra la sesión directamente. */
.logout-confirm-dialog {
    box-sizing: border-box;
    width: min(330px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dce8df;
    border-radius: 22px;
    background: #ffffff;
    color: #203a2a;
    box-shadow: 0 22px 60px rgba(8, 45, 25, 0.24);
    font-family: inherit;
}

.logout-confirm-dialog:not([open]) {
    display: none !important;
}

.logout-confirm-dialog::backdrop {
    background: rgba(8, 32, 20, 0.48);
}

.logout-confirm-dialog *,
.logout-confirm-dialog *::before,
.logout-confirm-dialog *::after {
    box-sizing: border-box;
}

.logout-confirm-card {
    padding: 24px 22px 20px;
    text-align: center;
}

.logout-confirm-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 17px;
    color: #a6372a;
    background: #fff0ed;
}

.logout-confirm-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logout-confirm-card h2 {
    margin: 0 0 8px;
    color: #173c26;
    font-size: 21px;
    line-height: 1.25;
}

.logout-confirm-card p {
    margin: 0;
    color: #5a6e60;
    font-size: 14px;
    line-height: 1.5;
}

.logout-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 10px;
    margin-top: 20px;
}

.logout-confirm-actions button {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.logout-confirm-cancel {
    border: 1px solid #d8e4dc;
    color: #31513c;
    background: #ffffff;
}

.logout-confirm-submit {
    border: 1px solid #a93b2e;
    color: #ffffff;
    background: #a93b2e;
}

.logout-confirm-actions button:focus-visible {
    outline: 3px solid #42a965;
    outline-offset: 2px;
}

/* =========================================================
   MÁS, MI PERFIL Y MIS PUBLICACIONES
   ========================================================= */
.account-hub-view,
.profile-view,
.my-posts-view {
    padding-top: 18px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.account-page-header,
.account-subpage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #0b542d, #148044);
    box-shadow: 0 12px 30px rgba(8, 83, 42, 0.16);
}

.account-page-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;
    background: rgba(255,255,255,.12);
}

.account-page-icon svg,
.account-menu-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-page-kicker,
.account-subpage-header > div > span {
    display: block;
    margin-bottom: 3px;
    color: #ccebd6;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.account-page-header h2,
.account-subpage-header h2 {
    margin: 0;
    color: #fff;
    font-size: 27px;
    line-height: 1.15;
}

.account-page-header p,
.account-subpage-header p {
    margin: 5px 0 0;
    color: #d9eee0;
    font-size: 13px;
    line-height: 1.4;
}

.account-back-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0 0 4px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.12);
    font: inherit;
    font-size: 31px;
    cursor: pointer;
}

.account-summary-card,
.account-guest-card,
.account-menu-card,
.profile-section-card,
.profile-posts-shortcut {
    border: 1px solid #dce7df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(26, 67, 40, .07);
}

/*
 * El navegador oculta los elementos con el atributo hidden. Sin esta regla,
 * el display:grid de las tarjetas puede volver visible la invitación de inicio
 * de sesión aunque Firebase ya haya restaurado una cuenta registrada.
 */
.account-summary-card[hidden],
.account-guest-card[hidden] {
    display: none !important;
}

.account-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 17px;
}

.account-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 16px;
    color: #fff;
    background: #14763f;
    font-size: 21px;
    font-weight: 850;
}

.account-summary-copy {
    min-width: 0;
    flex: 1;
}

.account-summary-copy strong,
.account-summary-copy span,
.account-summary-copy small {
    display: block;
}

.account-summary-copy strong { color: #173b26; font-size: 17px; }
.account-summary-copy span { margin-top: 2px; color: #52685a; font-size: 13px; overflow-wrap: anywhere; }
.account-summary-copy small { margin-top: 5px; color: #14713d; font-size: 11px; font-weight: 750; }

.account-verify-button {
    min-height: 39px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #bad9c4;
    border-radius: 11px;
    color: #12653a;
    background: #eff8f2;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.account-verify-button[hidden] { display: none; }

.account-guest-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 14px;
    margin-bottom: 16px;
    padding: 18px;
}

.account-guest-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #edf7f0;
    font-size: 21px;
}

.account-guest-card h3 { margin: 1px 0 5px; color: #173b26; font-size: 18px; }
.account-guest-card p { margin: 0; color: #5b6d61; font-size: 13px; line-height: 1.45; }
.account-guest-card button {
    grid-column: 1 / -1;
    min-height: 47px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #13723c;
    font: inherit;
    font-weight: 780;
    cursor: pointer;
}

.account-menu-card { overflow: hidden; }
.account-menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 78px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #edf1ee;
    color: #213d2b;
    background: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.account-menu-item:last-child { border-bottom: 0; }
.account-menu-item:disabled { cursor: not-allowed; opacity: .52; }
.account-menu-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #14703b;
    background: #eaf6ed;
}
.account-menu-icon.posts { color: #8b5c13; background: #fff5df; }
.account-menu-item strong, .account-menu-item small { display: block; }
.account-menu-item strong { font-size: 15px; }
.account-menu-item small { margin-top: 4px; color: #617267; font-size: 11px; line-height: 1.35; }
.account-menu-arrow { color: #7b8b81; font-size: 26px; }
.account-hub-note { margin: 16px 8px 0; color: #6a7b70; font-size: 11px; text-align: center; }

.profile-form { display: grid; gap: 16px; }
.profile-section-card { padding: 18px; }
.profile-section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 17px; }
.profile-section-number {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    color: #fff;
    background: #13713b;
    font-size: 13px;
    font-weight: 850;
}
.profile-section-heading h3 { margin: 1px 0 4px; color: #173b26; font-size: 18px; }
.profile-section-heading p { margin: 0; color: #65766b; font-size: 12px; line-height: 1.4; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-field { display: grid; gap: 6px; min-width: 0; }
.profile-field-full { grid-column: 1 / -1; }
.profile-field label, .profile-action-content > label {
    display: grid;
    gap: 6px;
    color: #294b35;
    font-size: 13px;
    font-weight: 750;
}
.profile-field label span { color: #14713d; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.profile-field label span.optional { color: #718077; }
.profile-field input,
.profile-field select,
.profile-action-content input,
.profile-action-content select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cfdcd3;
    border-radius: 13px;
    color: #1f3327;
    background: #fff;
    font: inherit;
    font-size: 15px;
}
.profile-field small { color: #697b6f; font-size: 10px; line-height: 1.4; }
.profile-phone-input { display: grid; grid-template-columns: 37px 1fr; align-items: center; border: 1px solid #cfdcd3; border-radius: 13px; overflow: hidden; }
.profile-phone-input > span { text-align: center; color: #14713d; font-weight: 800; }
.profile-phone-input input { border: 0; border-left: 1px solid #e2e9e4; border-radius: 0; }
.profile-switch-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; grid-column: 1 / -1; padding: 13px; border-radius: 14px; background: #f2f8f4; cursor: pointer; }
.profile-switch-row strong, .profile-switch-row small { display: block; }
.profile-switch-row strong { color: #294b35; font-size: 13px; }
.profile-switch-row small { margin-top: 3px; color: #65776b; font-size: 10px; }
.profile-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.profile-switch { position: relative; width: 43px; height: 25px; border-radius: 20px; background: #b8c8bd; transition: .18s; }
.profile-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .18s; }
.profile-switch-row input:checked + .profile-switch { background: #16914d; }
.profile-switch-row input:checked + .profile-switch::after { transform: translateX(18px); }
.profile-primary-button {
    min-height: 51px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: #11723b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(17,114,59,.18);
}
.profile-primary-button:disabled { opacity: .62; cursor: wait; }
.profile-inline-message, .my-posts-message, .profile-action-message {
    padding: 11px 13px;
    border: 1px solid #b9ddc6;
    border-radius: 12px;
    color: #175a31;
    background: #eaf7ef;
    font-size: 12px;
    line-height: 1.45;
}
.profile-inline-message.is-error, .my-posts-message.is-error, .profile-action-message.is-error { border-color: #efc8c2; color: #91372d; background: #fff1ee; }
.profile-security-card { margin-top: 16px; }
.profile-security-email { padding: 14px; border-radius: 14px; background: #f3f8f5; }
.profile-security-email span, .profile-security-email strong, .profile-security-email small { display: block; }
.profile-security-email span { color: #668071; font-size: 9px; font-weight: 850; letter-spacing: 1px; }
.profile-security-email strong { margin-top: 5px; overflow-wrap: anywhere; color: #183c27; font-size: 15px; }
.profile-security-email small { margin-top: 4px; color: #16713d; font-size: 10px; font-weight: 700; }
.profile-security-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.profile-security-actions button { min-height: 45px; padding: 9px; border: 1px solid #cfe0d4; border-radius: 12px; color: #185f34; background: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.profile-security-note { margin: 12px 0 0; padding: 12px; border-radius: 12px; color: #5f6e65; background: #f5f6f5; font-size: 11px; line-height: 1.45; }
.profile-posts-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 16px; padding: 17px; color: #193e28; text-align: left; font: inherit; cursor: pointer; }
.profile-posts-shortcut strong, .profile-posts-shortcut small { display: block; }
.profile-posts-shortcut small { margin-top: 4px; color: #68786e; font-size: 11px; }
.profile-posts-shortcut > span:last-child { color: #17713e; font-size: 26px; }

.profile-action-dialog,
.contact-options-dialog {
    box-sizing: border-box;
    width: min(370px, calc(100% - 28px));
    max-width: calc(100% - 28px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #dce6df;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(5,39,20,.28);
    font-family: inherit;
}
.profile-action-dialog:not([open]), .contact-options-dialog:not([open]) { display: none !important; }
.profile-action-dialog::backdrop, .contact-options-dialog::backdrop { background: rgba(7,31,18,.54); }
.profile-action-dialog *, .contact-options-dialog * { box-sizing: border-box; }
.profile-action-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px; color: #fff; background: linear-gradient(130deg, #0c542e, #147e43); }
.profile-action-header span { display: block; color: #d2ebda; font-size: 9px; font-weight: 850; letter-spacing: 1px; }
.profile-action-header h2 { margin: 4px 0 0; color: #fff; font-size: 21px; }
.profile-action-header button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); font: inherit; font-size: 24px; cursor: pointer; }
.profile-action-content { display: grid; gap: 14px; padding: 18px; }
.profile-action-content > p { margin: 0; color: #5e7064; font-size: 12px; line-height: 1.5; }
.profile-password-wrap { position: relative; }
.profile-password-wrap input { padding-right: 48px; }
.profile-password-wrap button { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 10px; color: #52685a; background: transparent; cursor: pointer; }
.profile-action-submit { min-height: 48px; border: 0; border-radius: 14px; color: #fff; background: #11723b; font: inherit; font-weight: 800; cursor: pointer; }
.profile-action-submit:disabled { opacity: .62; cursor: wait; }

.contact-options-card { padding: 22px; text-align: center; }
.contact-options-kicker { color: #14713d; font-size: 9px; font-weight: 850; letter-spacing: 1.1px; }
.contact-options-card h2 { margin: 6px 0 8px; color: #173c26; font-size: 20px; }
.contact-options-card p { margin: 0 0 17px; color: #607167; font-size: 12px; line-height: 1.5; }
.contact-options-card button { width: 100%; min-height: 47px; margin-top: 9px; border-radius: 13px; font: inherit; font-weight: 780; cursor: pointer; }
.contact-whatsapp-button { border: 0; color: #fff; background: #188c48; }
.contact-call-button { border: 1px solid #bcd9c5; color: #17623a; background: #eef8f1; }
.contact-cancel-button { border: 0; color: #65766c; background: transparent; }

.my-posts-tabs { display: flex; gap: 8px; margin-bottom: 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.my-posts-tabs::-webkit-scrollbar { display: none; }
.my-posts-tabs button { min-height: 40px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid #d4e1d8; border-radius: 999px; color: #52675a; background: #fff; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.my-posts-tabs button[aria-selected="true"] { border-color: #13713b; color: #fff; background: #13713b; }
.my-posts-message { margin-bottom: 12px; text-align: center; }
.my-posts-list { display: grid; gap: 13px; }
.my-post-card { padding: 16px; border: 1px solid #dce7df; border-radius: 19px; background: #fff; box-shadow: 0 7px 20px rgba(24,65,38,.06); }
.my-post-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.my-post-type, .my-post-status { padding: 5px 8px; border-radius: 8px; font-size: 9px; font-weight: 850; letter-spacing: .5px; }
.my-post-type.sell { color: #17633a; background: #e8f5ec; }
.my-post-type.buy { color: #8b5b12; background: #fff3da; }
.my-post-status { color: #53665a; background: #eef2ef; }
.my-post-status.active { color: #17643a; background: #def1e5; }
.my-post-status.paused, .my-post-status.review { color: #8b5a0c; background: #fff1d2; }
.my-post-card h3 { margin: 13px 0 4px; color: #183b27; font-size: 16px; }
.my-post-price { margin: 0; color: #0f6e37; font-size: 17px; font-weight: 850; }
.my-post-meta, .my-post-date { margin: 7px 0 0; color: #62746a; font-size: 11px; line-height: 1.4; }
.my-post-date { color: #849087; font-size: 9px; }
.my-post-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1ee; }
.my-post-actions button { min-height: 37px; padding: 7px 10px; border: 1px solid #cfe0d4; border-radius: 10px; color: #176239; background: #f7fbf8; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.my-post-actions button.danger { margin-left: auto; border-color: #eed4cf; color: #9a3a2e; background: #fff8f6; }

.market-live-card { padding: 15px; border: 1px solid #dbe7df; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(21,65,37,.06); }
.market-live-top, .market-live-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.market-live-top span { padding: 4px 7px; border-radius: 7px; color: #146438; background: #e4f3e9; font-size: 9px; font-weight: 850; }
.market-live-top small { color: #7b8a81; font-size: 9px; }
.market-live-card h4 { margin: 11px 0 4px; color: #173b26; font-size: 15px; }
.market-live-card > strong { color: #0f7038; font-size: 17px; }
.market-live-card > p { margin: 6px 0 12px; color: #617269; font-size: 11px; }
.market-live-footer { padding-top: 11px; border-top: 1px solid #edf1ee; }
.market-live-footer span { min-width: 0; overflow: hidden; color: #334f3c; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.market-live-footer button { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 10px; color: #fff; background: #14753e; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }

.market-list-section[hidden] {
    display: none !important;
}

.market-type-card.is-active {
    border-color: #168348;
    box-shadow: 0 0 0 3px rgba(22, 131, 72, .12), 0 8px 22px rgba(21, 85, 47, .09);
}

.market-type-card.buying.is-active {
    border-color: #8552b7;
    box-shadow: 0 0 0 3px rgba(133, 82, 183, .11), 0 8px 22px rgba(82, 49, 119, .08);
}

.market-live-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 8px;
}

.market-live-details span {
    padding: 6px 8px;
    border: 1px solid #e1ebe4;
    border-radius: 999px;
    color: #415b49;
    background: #f6faf7;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
}

.market-live-card > .market-live-location {
    margin: 7px 0 12px;
    color: #617269;
    font-size: 11px;
}

.profile-field input.is-locked {
    border-color: #d7e1da;
    color: #42574a;
    background: #f1f5f2;
    cursor: not-allowed;
}

.sell-price-unit {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.sell-price-unit legend {
    margin-bottom: 8px;
    color: #294b35;
    font-size: 12px;
    font-weight: 800;
}

.sell-price-unit-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sell-price-unit-options label {
    position: relative;
    cursor: pointer;
}

.sell-price-unit-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sell-price-unit-options label > span {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #d5e1d8;
    border-radius: 13px;
    color: #385443;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.sell-price-unit-options label.is-selected > span,
.sell-price-unit-options input:checked + span {
    border-color: #168148;
    color: #116537;
    background: #ebf8ef;
    box-shadow: 0 0 0 2px rgba(22, 129, 72, .11);
}

.sell-price-unit-options strong,
.sell-price-unit-options small {
    display: block;
}

.sell-price-unit-options strong { font-size: 11px; }
.sell-price-unit-options small { margin-top: 3px; color: #65766b; font-size: 8px; line-height: 1.3; }
.sell-price-help { display: block; margin-top: 6px; color: #64766b; font-size: 9px; line-height: 1.4; }

.buy-validity-field { margin: 0; padding: 0; border: 0; }
.buy-validity-field legend { margin-bottom: 9px; color: #294b35; font-size: 13px; font-weight: 750; }
.buy-validity-field .required-label { color: #14713d; font-size: 9px; text-transform: uppercase; }
.buy-validity-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.buy-validity-options label { position: relative; cursor: pointer; }
.buy-validity-options input { position: absolute; opacity: 0; }
.buy-validity-options label > span { display: grid; place-content: center; min-height: 65px; padding: 8px; border: 1px solid #d2ded6; border-radius: 12px; color: #52665a; background: #fff; text-align: center; }
.buy-validity-options strong, .buy-validity-options small { display: block; }
.buy-validity-options strong { font-size: 12px; }
.buy-validity-options small { margin-top: 3px; font-size: 8px; }
.buy-validity-options input:checked + span { border-color: #168148; color: #126738; background: #eaf7ee; box-shadow: 0 0 0 2px rgba(22,129,72,.12); }

@media (max-width: 520px) {
    .account-page-header, .account-subpage-header { padding: 17px; }
    .profile-fields, .profile-location-grid { grid-template-columns: 1fr; }
    .profile-field { grid-column: 1 / -1; }
    .profile-security-actions { grid-template-columns: 1fr; }
    .buy-validity-options { grid-template-columns: 1fr; }
    .buy-validity-options label > span { min-height: 51px; }
}

/* =========================================================
   CERDO RD 1.2 — publicaciones sin vencimiento y ventas vendidas
   ========================================================= */

/* La versión se muestra exclusivamente dentro de Android. */
.app-footer.cerdo-native-only,
.more-about-version.cerdo-native-only {
    display: none !important;
}

html.cerdo-native-app .app-footer.cerdo-native-only {
    display: grid !important;
}

html.cerdo-native-app .more-about-version.cerdo-native-only {
    display: grid !important;
}

.market-sale-card.is-sold,
.market-live-card.is-sold {
    border-color: #d7b7b2 !important;
    background: linear-gradient(145deg, #fffafa, #f8efed) !important;
}

.market-sale-card.is-sold .market-sale-card-cover img {
    filter: saturate(.58) contrast(.94);
}

.market-sale-sold-ribbon {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 12px;
    padding: 7px 11px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 999px;
    color: #fff;
    background: #a92d22;
    box-shadow: 0 7px 18px rgba(95,21,15,.28);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .8px;
}

.market-sale-card-status.is-sold,
.market-compact-type.is-sold,
.market-sale-detail-type.is-sold {
    color: #8f241b !important;
    background: #f8dedb !important;
}

.market-classic-sold-badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    background: #a92d22;
    box-shadow: 0 6px 16px rgba(95,21,15,.22);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .7px;
}

.market-sale-detail-contact-note.is-sold {
    border-color: #e3b6b0;
    color: #75251e;
    background: #fff0ee;
    font-weight: 850;
}

.market-sale-detail-sold-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 15px;
    padding: 12px 14px;
    border: 1px solid #dfaaa3;
    border-radius: 13px;
    color: #76241d;
    background: linear-gradient(135deg, #fff0ee, #f8d9d5);
    box-shadow: 0 6px 16px rgba(105,31,23,.1);
}

.market-sale-detail-sold-notice[hidden] {
    display: none !important;
}

.market-sale-detail-sold-notice strong {
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .8px;
}

.market-sale-detail-sold-notice span {
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.market-sale-detail-actions[hidden] {
    display: none !important;
}

#homeView .price-table-message {
    padding: 24px;
    text-align: center;
}

#homeView .price-table-message-error {
    color: #8b2f2f;
    background: #fff6f6;
}

#homeView .price-table-message-error small {
    display: block;
    margin-top: 6px;
    color: #9d5656;
    font-size: 11px;
}

/* =========================================================
   PRECIOS POR ZONA · TARJETAS EN MÓVIL
   La tabla de siete columnas se conserva en escritorio.
   ========================================================= */

@media (max-width: 700px) {
    #homeView .table-container {
        overflow: visible;
    }

    #homeView .table-container table,
    #homeView .table-container tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #homeView .table-container thead {
        display: none;
    }

    #homeView #priceTable {
        display: grid;
        gap: 10px;
    }

    #homeView #priceTable tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "municipio precio"
            "distrito precio"
            "provincia estado";
        gap: 5px 14px;
        width: 100%;
        min-width: 0;
        padding: 14px;
        border: 1px solid #e1ebe4;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 3px 10px rgb(20 83 45 / 5%);
    }

    #homeView #priceTable td {
        min-width: 0;
        padding: 0;
        border: 0;
        color: #25352b;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #homeView #priceTable td:nth-child(1) {
        grid-area: municipio;
        color: #173e27;
        font-size: 16px;
        font-weight: 800;
    }

    #homeView #priceTable td:nth-child(2) {
        grid-area: distrito;
        color: #53675a;
    }

    #homeView #priceTable td:nth-child(2)::before {
        content: "Zona: ";
        font-weight: 700;
    }

    #homeView #priceTable td:nth-child(3) {
        grid-area: provincia;
        color: #6b7b70;
        font-size: 12px;
    }

    #homeView #priceTable td:nth-child(3)::before {
        content: "Provincia: ";
        font-weight: 700;
    }

    #homeView #priceTable td:nth-child(4) {
        grid-area: precio;
        align-self: start;
        color: #116b38;
        text-align: right;
        white-space: nowrap;
    }

    #homeView #priceTable td:nth-child(5),
    #homeView #priceTable td:nth-child(6) {
        display: none;
    }

    #homeView #priceTable td:nth-child(7) {
        grid-area: estado;
        align-self: end;
        justify-self: end;
        text-align: right;
    }

    #homeView #priceTable td[colspan] {
        display: block;
        grid-column: 1 / -1;
        grid-area: auto;
        padding: 8px !important;
        color: #587063;
        text-align: center !important;
        white-space: normal;
    }

    #homeView #priceTable td[colspan]::before {
        content: none;
    }

    #homeView .price-row-context {
        margin-top: 2px;
        font-size: 9px;
    }
}


/* =========================================================
   HOME V5 — ORDEN CLARO Y ACTIVIDAD DEL MERCADO
   ========================================================= */

#homeView:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#homeView[hidden] {
    display: none !important;
}

#homeView > .exact-market-card {
    order: 1;
}

#homeView > .zone-card {
    order: 2;
}

#homeView > .home-market-preview {
    order: 3;
}

#homeView > .home-zone-prices-section {
    order: 4;
}

#homeView > .stats {
    order: 5;
}

#homeView > .market-reading-section,
#homeView > .about-section {
    display: none !important;
}

#homeView .home-market-preview {
    margin: 12px 0 0;
    padding: 16px;
    border: 1px solid var(--cerdo-border);
    border-top: 3px solid var(--cerdo-green-700);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--cerdo-shadow-sm);
}

#homeView .home-market-preview-heading {
    align-items: center;
}

#homeView .home-market-preview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-top: 14px;
}

#homeView .home-market-preview-column {
    position: relative;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid #d8e9dd;
    border-left: 4px solid var(--cerdo-green-600);
    border-radius: 16px;
    background: linear-gradient(135deg, #f4fbf6, #ffffff);
}

#homeView .home-market-preview-column.buying {
    border-color: #e6d9ef;
    border-left-color: #8552b7;
    background: linear-gradient(135deg, #faf6fc, #ffffff);
}

#homeView .home-market-preview-title {
    justify-content: flex-start;
}

#homeView .home-market-preview-title span {
    padding: 5px 8px;
    font-size: 8.5px;
}

#homeView .home-market-preview-title h3 {
    color: #254532;
    font-size: 12px;
}

#homeView .home-market-mini-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px 12px;
    min-height: 82px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 104, 57, .1);
}

#homeView .home-market-preview-column.buying .home-market-mini-card {
    border-top-color: rgba(117, 66, 157, .11);
}

#homeView .home-market-mini-card strong {
    grid-column: 1;
    color: #173b26;
    font-size: 15px;
    line-height: 1.3;
}

#homeView .home-market-mini-card b {
    grid-column: 2;
    grid-row: 1;
    color: var(--cerdo-green-700);
    font-size: 17px;
    line-height: 1.25;
    text-align: right;
}

#homeView .home-market-preview-column.buying .home-market-mini-card b {
    color: #75429d;
}

#homeView .home-market-mini-card small {
    grid-column: 1 / -1;
    color: var(--cerdo-text-secondary);
    font-size: 10.5px;
}

#homeView .home-market-mini-empty {
    min-height: 70px;
    display: flex;
    align-items: center;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(31, 104, 57, .1);
    font-size: 10.5px;
}

#homeView > .home-zone-prices-section {
    margin-top: 12px;
}

#homeView > .stats {
    margin-top: 12px;
    margin-bottom: 0;
}

.market-load-more-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 0 26px;
    padding: 10px 11px;
    border: 1px solid #d6e6db;
    border-radius: 13px;
    background: #f7fbf8;
}

.market-load-more-bar[hidden] {
    display: none !important;
}

.market-load-more-bar span {
    color: #66766b;
    font-size: 10px;
    font-weight: 700;
}

.market-load-more-bar button {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #bddbc6;
    border-radius: 10px;
    background: #ffffff;
    color: var(--cerdo-green-700);
    font-size: 10.5px;
    font-weight: 850;
    cursor: pointer;
}

.market-load-more-bar button:active {
    transform: translateY(1px);
}


/* V6: estas reglas finales prevalecen sobre el componente antiguo. */
.market-filter-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(760px, calc(100dvh - 32px));
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

.market-filter-dialog-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 18px 15px;
    border-bottom: 1px solid #e2ece5;
    background: linear-gradient(135deg, #f4fbf6 0%, #ffffff 75%);
}

.market-filter-form {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    padding: 15px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

.market-filter-actions {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0;
    padding: 13px 18px max(13px, env(safe-area-inset-bottom));
    border-top: 1px solid #dfe9e2;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -7px 20px rgb(20 83 45 / 7%);
    backdrop-filter: blur(10px);
}

@media (max-width: 430px) {
    .market-filter-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .market-filter-dialog {
        width: 100%;
        max-height: min(92dvh, 820px);
        padding: 0;
        border-radius: 24px 24px 0 0;
    }

    .market-filter-dialog-header {
        padding: 16px 16px 13px;
    }

    .market-filter-form {
        padding: 13px 15px 16px;
    }

    .market-filter-actions {
        padding-right: 15px;
        padding-left: 15px;
    }

    .market-load-more-bar {
        align-items: stretch;
        flex-direction: column;
        margin-left: 24px;
        text-align: center;
    }
}

@media (max-width: 430px) {
    #homeView .home-market-preview {
        padding: 14px;
    }

    #homeView .home-market-preview-heading {
        align-items: flex-start;
    }

    #homeView .home-market-preview-heading .home-card-heading-copy p {
        display: block;
    }

    #homeView .home-market-see-all {
        min-height: 36px;
        padding: 6px 9px;
    }

    #homeView .home-market-mini-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    #homeView .home-market-mini-card b {
        grid-column: 1;
        grid-row: auto;
        font-size: 16px;
        text-align: left;
    }
}


/* =========================================================
   MERCADO — DISEÑO 3 EXACTO: TARJETAS ENTRELAZADAS
   ========================================================= */

.market-interwoven-list {
    display: flex;
    height: auto;
    max-height: none;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding: 6px 8px 18px;
    overflow-x: hidden;
    overflow-y: visible;
    border-radius: 18px;
    background: #fbfdfc;
    overscroll-behavior-y: auto;
    scroll-behavior: smooth;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.market-interwoven-list.has-internal-scroll {
    max-height: 1640px;
    overflow-y: auto;
}

.market-interwoven-list::before,
.market-interwoven-node,
.market-live-top,
.market-live-details,
.market-live-location,
.market-live-footer {
    display: none !important;
}

.market-interwoven-list::-webkit-scrollbar {
    width: 5px;
}

.market-interwoven-list::-webkit-scrollbar-track {
    background: transparent;
}

.market-interwoven-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #a7cfb2;
}

.market-interwoven-list .market-live-card,
.market-interwoven-list .market-live-card--sell,
.market-interwoven-list .market-live-card--buy,
.market-interwoven-board[data-mode="selling"] .market-live-card,
.market-interwoven-board[data-mode="buying"] .market-live-card {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-height: 148px;
    margin: 0 !important;
    padding: 14px 16px;
    grid-template-columns: 56px minmax(0, 1fr) minmax(105px, auto);
    align-items: center;
    gap: 14px;
    border: 1.5px solid #cce8d5;
    border-radius: 18px;
    background: #fbfefc;
    box-shadow: none;
    color: #173e27;
    cursor: pointer;
    transform: none !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.market-interwoven-list .market-live-card--buy {
    border-color: #e5d6ef;
    background: #fdfaff;
    color: #74409d;
}

.market-interwoven-list .market-live-card:active {
    transform: scale(.992) !important;
}

.market-interwoven-list .market-live-card:focus-visible {
    outline: 3px solid rgb(22 147 77 / 20%);
    outline-offset: 2px;
}

.market-interwoven-list .market-live-card--buy:focus-visible {
    outline-color: rgb(127 72 171 / 20%);
}

.market-compact-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 16px;
    background: #e4f4e9;
    color: #11743d;
}

.market-live-card--buy .market-compact-icon {
    background: #f0e6f7;
    color: #7b44a5;
}

.market-compact-icon svg {
    width: 29px;
    height: 29px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-compact-copy {
    min-width: 0;
}

.market-compact-type {
    display: block;
    margin-bottom: 7px;
    color: #14763f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .25px;
}

.market-live-card--buy .market-compact-type {
    color: #7b44a5;
}

.market-interwoven-list .market-live-card .market-compact-copy h4 {
    display: -webkit-box;
    margin: 0 0 8px;
    overflow: hidden;
    color: #183d27;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-interwoven-list .market-live-card--buy .market-compact-copy h4 {
    color: #3f304a;
}

.market-compact-copy p {
    margin: 0;
    color: #66776c;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
}

.market-compact-characteristics {
    margin-bottom: 5px !important;
}

.market-compact-owner {
    margin-bottom: 3px !important;
    color: #2d5039 !important;
    font-weight: 850;
}

.market-live-card--buy .market-compact-owner {
    color: #604170 !important;
}

.market-compact-location {
    color: #67776d !important;
    overflow-wrap: anywhere;
}

.market-compact-price {
    display: flex;
    min-width: 105px;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
}

.market-compact-price time {
    margin-bottom: 6px;
    color: #748178;
    font-size: 10.5px;
    line-height: 1.15;
}

.market-interwoven-list .market-live-card .market-compact-price strong {
    display: block;
    color: #11743d;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

.market-interwoven-list .market-live-card--buy .market-compact-price strong {
    color: #7b44a5;
}

.market-compact-price span {
    margin-top: 5px;
    color: currentColor;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.market-interwoven-list > .market-empty-state {
    width: 100%;
    min-height: 220px;
    margin: 0;
    align-self: stretch;
}

@media (max-width: 430px) {
    .market-interwoven-board {
        padding: 15px 13px;
    }

    .market-interwoven-list {
        height: auto;
        max-height: none;
        min-height: 0;
        gap: 10px;
        padding: 5px 5px 15px;
    }

    .market-interwoven-list.has-internal-scroll {
        max-height: 1590px;
    }

    .market-interwoven-list .market-live-card,
    .market-interwoven-list .market-live-card--sell,
    .market-interwoven-list .market-live-card--buy,
    .market-interwoven-board[data-mode="selling"] .market-live-card,
    .market-interwoven-board[data-mode="buying"] .market-live-card {
        min-height: 145px;
        padding: 12px 11px;
        grid-template-columns: 48px minmax(0, 1fr) minmax(86px, auto);
        gap: 10px;
        border-radius: 16px;
    }

    .market-compact-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .market-compact-icon svg {
        width: 25px;
        height: 25px;
    }

    .market-compact-type {
        margin-bottom: 5px;
        font-size: 9.5px;
    }

    .market-interwoven-list .market-live-card .market-compact-copy h4 {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .market-compact-copy p {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .market-compact-price {
        min-width: 86px;
    }

    .market-compact-price time {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .market-interwoven-list .market-live-card .market-compact-price strong {
        max-width: 105px;
        font-size: 16px;
        white-space: normal;
    }

    .market-compact-price span {
        margin-top: 4px;
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .market-interwoven-list .market-live-card,
    .market-interwoven-list .market-live-card--sell,
    .market-interwoven-list .market-live-card--buy {
        grid-template-columns: 42px minmax(0, 1fr) 78px;
        gap: 8px;
        padding: 11px 9px;
    }

    .market-compact-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .market-interwoven-list .market-live-card .market-compact-copy h4 {
        font-size: 12px;
    }

    .market-compact-copy p {
        font-size: 9.5px;
    }

    .market-interwoven-list .market-live-card .market-compact-price strong {
        font-size: 14px;
    }
}


/* V9: estas reglas deben permanecer al final para prevalecer sobre V7. */
#homeView > .home-market-preview {
    order: 3;
}

#homeView > .stats {
    order: 4;
    margin-top: 12px;
}

#homeView > .home-zone-prices-section {
    order: 5;
}

#homeView .home-market-interwoven-list {
    width: 100%;
    max-height: none;
    margin-top: 0;
    padding: 3px;
    gap: 10px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    overscroll-behavior: auto;
}

#homeView .home-market-interwoven-list .market-live-card {
    width: 100%;
}

.market-interwoven-order {
    display: inline-flex;
}

@media (max-width: 360px) {
    .market-interwoven-order {
        display: inline-flex;
        max-width: 82px;
        padding-inline: 7px;
        font-size: 7.5px;
    }
}

.contact-options-dialog {
    width: min(420px, calc(100% - 24px));
}

.contact-options-card {
    padding: 18px;
    text-align: left;
}

.contact-options-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-options-topline time {
    color: #748178;
    font-size: 11px;
    font-weight: 720;
    text-align: right;
}

.contact-options-dialog[data-post-type="buy"] .contact-options-kicker {
    color: #7b44a5;
}

.contact-options-card h2 {
    margin: 7px 0 13px;
    text-align: left;
}

.contact-post-summary {
    padding: 14px;
    border: 1px solid #d6e8dc;
    border-left: 4px solid #158044;
    border-radius: 16px;
    background: #f8fcf9;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary {
    border-color: #e6d9ef;
    border-left-color: #7b44a5;
    background: #fcf9fe;
}

.contact-post-summary > strong,
.contact-post-summary > b {
    display: block;
}

.contact-post-summary > strong {
    color: #183d27;
    font-size: 15px;
    line-height: 1.3;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary > strong {
    color: #44304f;
}

.contact-post-summary > b {
    margin-top: 6px;
    color: #11743d;
    font-size: 19px;
    line-height: 1.2;
}

.contact-options-dialog[data-post-type="buy"] .contact-post-summary > b {
    color: #7b44a5;
}

.contact-post-summary dl {
    display: grid;
    gap: 8px;
    margin: 13px 0 0;
}

.contact-post-summary dl > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 9px;
    padding-top: 8px;
    border-top: 1px solid rgb(22 102 54 / 10%);
}

.contact-post-summary dt,
.contact-post-summary dd {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
}

.contact-post-summary dt {
    color: #6b796f;
    font-weight: 750;
}

.contact-post-summary dd {
    overflow-wrap: anywhere;
    color: #294836;
    font-weight: 700;
}

.contact-options-card .contact-options-notice {
    margin: 13px 2px 5px;
    color: #607167;
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
}

.contact-options-card button {
    text-align: center;
}

@media (max-width: 430px) {
    .contact-options-card {
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .contact-post-summary dl > div {
        grid-template-columns: 74px minmax(0, 1fr);
    }
}


/* V10: tarjetas adaptables de Inicio y Mercado. Mantener al final del archivo. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
input,
select,
textarea,
button {
    max-width: 100%;
}

.app-view,
.view,
.screen,
.app-shell,
.content-shell,
.market-interwoven-board,
.market-interwoven-list,
.home-market-preview,
.home-market-preview-list {
    min-width: 0;
    max-width: 100%;
}

.market-interwoven-list .market-live-card,
.market-interwoven-list .market-live-card--sell,
.market-interwoven-list .market-live-card--buy,
.market-interwoven-board[data-mode="selling"] .market-live-card,
.market-interwoven-board[data-mode="buying"] .market-live-card {
    position: relative;
    grid-template-columns: clamp(44px, 12vw, 56px) minmax(0, 1fr) minmax(76px, max-content);
    column-gap: clamp(8px, 2.8vw, 14px);
    overflow: hidden;
    touch-action: pan-y;
}

.market-compact-copy,
.market-compact-copy h4,
.market-compact-copy p {
    min-width: 0;
    max-width: 100%;
}

.market-compact-copy h4,
.market-compact-copy p {
    overflow-wrap: anywhere;
}

.market-compact-price {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    padding-top: 22px;
    justify-self: end;
    overflow: visible;
}

.market-compact-price time {
    position: absolute;
    top: 12px;
    right: 14px;
    max-width: 42%;
    margin: 0;
    overflow: hidden;
    color: #748178;
    line-height: 1.15;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-interwoven-list .market-live-card .market-compact-price strong {
    width: auto;
    max-width: none;
    letter-spacing: -.25px;
    line-height: 1.05;
    white-space: nowrap;
}

.market-interwoven-list .market-live-card .market-compact-price--short strong {
    font-size: clamp(15px, 4.2vw, 19px);
}

.market-interwoven-list .market-live-card .market-compact-price--medium strong {
    font-size: clamp(12.5px, 3.65vw, 16.5px);
}

.market-interwoven-list .market-live-card .market-compact-price--long strong {
    font-size: clamp(10.5px, 3.15vw, 14px);
}

.market-compact-price span {
    max-width: 100%;
    line-height: 1.15;
    white-space: normal;
}

#homeView .home-market-interwoven-list {
    max-height: none;
    overflow: visible;
}

@media (max-width: 430px) {
    .market-interwoven-list .market-live-card,
    .market-interwoven-list .market-live-card--sell,
    .market-interwoven-list .market-live-card--buy,
    .market-interwoven-board[data-mode="selling"] .market-live-card,
    .market-interwoven-board[data-mode="buying"] .market-live-card {
        grid-template-columns: clamp(42px, 12.5vw, 48px) minmax(0, 1fr) minmax(72px, max-content);
        padding: 12px clamp(9px, 3vw, 12px);
    }

    .market-compact-price {
        min-width: 0;
        padding-top: 20px;
    }

    .market-compact-price time {
        top: 10px;
        right: 11px;
        margin: 0;
        font-size: 9px;
    }

    .market-interwoven-list .market-live-card .market-compact-price--short strong {
        font-size: clamp(14px, 4.1vw, 17px);
    }

    .market-interwoven-list .market-live-card .market-compact-price--medium strong {
        font-size: clamp(12px, 3.55vw, 14.5px);
    }

    .market-interwoven-list .market-live-card .market-compact-price--long strong {
        font-size: clamp(10px, 3vw, 12.5px);
    }

    .market-compact-price span {
        font-size: clamp(8px, 2.45vw, 9.5px);
    }
}

@media (max-width: 340px) {
    .market-interwoven-list .market-live-card,
    .market-interwoven-list .market-live-card--sell,
    .market-interwoven-list .market-live-card--buy,
    .market-interwoven-board[data-mode="selling"] .market-live-card,
    .market-interwoven-board[data-mode="buying"] .market-live-card {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        row-gap: 4px;
    }

    .market-compact-icon {
        width: 40px;
        height: 40px;
    }

    .market-compact-copy {
        padding-right: 34px;
    }

    .market-compact-price {
        grid-column: 2;
        width: 100%;
        padding-top: 2px;
        align-items: flex-start;
        justify-self: stretch;
        text-align: left;
    }

    .market-compact-price time {
        top: 9px;
        right: 9px;
        max-width: 38%;
    }

    .market-compact-price span {
        margin-top: 2px;
    }
}


/* V11: navegación secundaria, paginación y Acerca adaptables. */
.app-footer {
    gap: 0;
    padding-top: 22px;
}

.app-footer strong {
    color: #6f7d74;
    font-size: 10px;
    font-weight: 750;
}

.table-pagination,
.pagination-buttons,
.pagination-button,
.pagination-page {
    min-width: 0;
}

.pagination-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
}

.pagination-button {
    width: auto;
    min-width: max-content;
    padding-inline: clamp(7px, 2.8vw, 13px);
    flex: 0 0 auto;
    line-height: 1.2;
    white-space: nowrap;
}

.pagination-page {
    width: auto;
    min-width: 0;
    padding-inline: 3px;
    line-height: 1.2;
    white-space: nowrap;
}

.more-about-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 18px !important;
    border: 1px solid #cee7d6;
    background: linear-gradient(145deg, #f2fbf5 0%, #ffffff 72%) !important;
    text-align: center;
}

.more-about-hero::after {
    position: absolute;
    right: -30px;
    bottom: -38px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgb(20 128 68 / 7%);
    content: "";
}

.more-about-mark {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid #c7e5d1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(20 102 57 / 12%);
    font-size: 34px;
}

.more-about-hero > span {
    display: block;
    margin-bottom: 7px;
    color: #147640;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.more-info-body .more-about-hero h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.2;
}

.more-about-section {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px !important;
    border: 1px solid #e3ece6;
    background: #fff !important;
}

.more-about-number {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 11px;
    color: #11743d;
    background: #e8f6ed;
    font-size: 10px;
    font-weight: 900;
}

.more-about-safety {
    padding: 14px !important;
    border: 1px solid #f0ddb4;
    color: #694d18;
    background: #fff9ea !important;
}

.more-about-safety strong {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

.more-about-version {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 13px;
    border-top: 1px solid #e4ece7;
    color: #64766b;
    text-align: center;
}

.more-about-version span {
    color: #718178;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.more-about-version strong {
    color: #126f3b;
    font-size: 16px;
}

.more-about-version small {
    font-size: 9px;
}

html.cerdo-web-browser .cerdo-native-only {
    display: none !important;
}

html.cerdo-web-browser .app-footer {
    display: none !important;
}

.more-about-rights {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 15px 13px;
    border-top: 1px solid #e4ece7;
    color: #64766b;
    text-align: center;
}

.more-about-rights strong {
    color: #183c2a;
    font-size: 10px;
}

.more-about-rights small {
    max-width: 420px;
    font-size: 9px;
    line-height: 1.45;
}

.cerdo-screen-copyright {
    order: 999;
    grid-column: 1 / -1;
    width: 100%;
    margin: clamp(22px, 5vw, 42px) auto 0;
    padding: 15px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(10, 108, 56, .12);
    color: #718178;
    font-size: clamp(9px, 2.5vw, 11px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 430px) {
    .table-pagination {
        align-items: stretch;
    }

    .pagination-buttons {
        gap: clamp(4px, 1.8vw, 8px);
    }

    .pagination-button,
    .pagination-page {
        font-size: clamp(9px, 3vw, 13px);
    }
}

@media (max-width: 340px) {
    .pagination-button {
        padding-inline: 6px;
    }

    .pagination-page {
        font-size: 8.5px;
    }
}
/* =========================================================
   PRIVACIDAD Y ELIMINACIÓN DE CUENTA · V17
========================================================= */
.account-menu-danger strong{color:#9f2f28!important}
.account-menu-icon.deletion{background:#fff0ee!important;color:#ad3027!important;font-size:1.45rem;font-weight:900}
.account-menu-icon.legal{background:#eef5f0!important;color:#176d3c!important;font-size:1.25rem;font-weight:900}
.account-deletion-dialog .deletion-header{background:linear-gradient(135deg,#7f211c,#b2382f)}
.account-deletion-warning{display:grid;gap:5px;padding:14px;border:1px solid #efc4bf;border-radius:14px;background:#fff5f4;color:#7f241e}
.account-deletion-warning strong{font-size:.92rem}.account-deletion-warning span{font-size:.78rem;line-height:1.45}
.account-deletion-dialog textarea{width:100%;padding:12px;border:1px solid #ced9d1;border-radius:12px;background:#fff;color:#1e3426;font:inherit;resize:vertical;box-sizing:border-box}
.account-deletion-check{display:flex!important;align-items:flex-start;gap:10px;padding:12px;border-radius:12px;background:#f6f8f6;font-size:.78rem!important;line-height:1.45}
.account-deletion-check input{flex:0 0 auto;width:19px!important;height:19px!important;margin-top:1px;accent-color:#a72d25}
.deletion-submit{background:#a72d25!important;border-color:#a72d25!important}
.account-deletion-external{margin:0;text-align:center;color:#68766d;font-size:.72rem;line-height:1.45}.account-deletion-external a{color:#126d38;font-weight:800}

/* =========================================================
   V20 · EXPERIENCIA WEB PROFESIONAL RESPONSIVE

   - Teléfonos: conserva la navegación inferior y el flujo móvil.
   - Tabletas: amplía superficies sin estirar el contenido.
   - Escritorio con mouse: navegación superior y composición dashboard.
   ========================================================= */

/* TABLETAS: más aire, controles cómodos y un ancho legible. */
@media (min-width: 701px) and (max-width: 1179px) {
    :root {
        --cerdo-content-width: 980px;
    }

    .container {
        width: min(94%, var(--cerdo-content-width));
        margin-top: 24px;
    }

    .app-header {
        padding-inline: 3%;
    }

    .bottom-navigation {
        max-width: 820px;
        border: 1px solid var(--cerdo-border);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
    }

    #homeView .home-market-interwoven-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 12px;
    }

    #homeView .home-market-interwoven-list .market-live-card {
        height: 100%;
    }

    .zones-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/*
 * La versión de escritorio solo se activa con una pantalla amplia y un
 * puntero preciso. Una tableta grande conserva así su navegación táctil.
 */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
    :root {
        --cerdo-content-width: 1440px;
        --cerdo-desktop-sidebar: clamp(350px, 27vw, 410px);
        --cerdo-desktop-gap: clamp(20px, 2vw, 30px);
    }

    html {
        background: #eef4f0;
    }

    body {
        min-width: 1180px;
        padding-bottom: 0;
        background:
            radial-gradient(circle at 8% 7%, rgba(20, 128, 68, .08), transparent 24rem),
            radial-gradient(circle at 92% 18%, rgba(134, 82, 183, .055), transparent 28rem),
            linear-gradient(180deg, #f8fbf9 0%, #f1f6f3 54%, #edf3ef 100%);
    }

    /* Cabecera corporativa fija. */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 900;
        min-height: 82px;
        padding: 14px 32px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 8px 30px rgba(6, 58, 29, .13);
    }

    .app-header .header-content {
        width: min(1500px, 100%);
        min-height: 54px;
    }

    .app-header .brand {
        flex: 0 1 300px;
    }

    .app-header .pig-logo {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 18px;
    }

    .app-header .brand h1 {
        font-size: 25px;
        letter-spacing: -.55px;
    }

    .app-header .brand p {
        font-size: 12px;
    }

    .app-header .admin-actions {
        min-width: 172px;
    }

    .app-header .admin-button,
    .header-icon-button,
    .app-header .session-icon-button {
        border-radius: 12px;
    }

    /* La misma navegación pasa de barra móvil a menú principal superior. */
    .bottom-navigation {
        position: fixed;
        top: 14px;
        bottom: auto;
        left: 50%;
        right: auto;
        z-index: 1000;
        width: min(530px, 46vw);
        max-width: none;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
        margin: 0;
        padding: 5px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: 44px;
        gap: 3px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 15px;
        background: rgba(4, 68, 33, .58);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transform: translateX(-50%) !important;
    }

    .bottom-nav-item,
    .bottom-create-wrapper {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }

    .bottom-nav-item {
        flex-direction: row;
        gap: 7px;
        padding: 0 10px;
        border-radius: 11px;
        color: rgba(255, 255, 255, .76);
        transition: color 150ms ease, background 150ms ease, transform 150ms ease;
    }

    .bottom-nav-item:hover {
        color: #fff;
        background: rgba(255, 255, 255, .09);
    }

    .bottom-nav-item:active {
        transform: translateY(1px);
    }

    .bottom-nav-item.active {
        color: #0c5f30;
        background: #fff;
        box-shadow: 0 5px 15px rgba(2, 44, 20, .18);
    }

    .bottom-nav-item svg {
        width: 19px;
        height: 19px;
        min-width: 19px;
        min-height: 19px;
        flex-basis: 19px;
    }

    .bottom-nav-item span {
        width: auto;
        height: auto;
        min-height: 0;
        font-size: 12px;
        font-weight: 780;
        line-height: 1;
    }

    .bottom-create-wrapper {
        position: static;
    }

    .bottom-create-button {
        position: relative;
        left: auto;
        bottom: auto;
        width: 98px;
        height: 42px;
        min-width: 0;
        min-height: 42px;
        gap: 5px;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: 11px;
        background: linear-gradient(145deg, #2cb25e, #168341);
        box-shadow: 0 6px 16px rgba(2, 44, 20, .2);
        transform: none;
    }

    .bottom-create-button:hover {
        background: linear-gradient(145deg, #39bd69, #1a8f48);
    }

    .bottom-create-button:active {
        transform: translateY(1px);
    }

    .bottom-create-button span {
        font-size: 25px;
        font-weight: 350;
        transform: translateY(-1px);
    }

    .bottom-create-button::after {
        content: "Publicar";
        color: #fff;
        font-size: 11px;
        font-weight: 820;
        line-height: 1;
    }

    .bottom-create-button[aria-expanded="true"] span {
        transform: translateY(-1px) rotate(45deg);
    }

    /* Contenido general: amplio, pero nunca pegado a los bordes. */
    .container {
        width: min(var(--cerdo-content-width), calc(100% - 72px));
        margin: 32px auto 64px;
        padding-bottom: 0;
    }

    .container.app-view {
        animation: cerdoDesktopViewIn 220ms ease-out both;
    }

    @keyframes cerdoDesktopViewIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* HOME: panel principal + columna contextual. */
    #homeView:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--cerdo-desktop-sidebar);
        grid-template-rows: auto auto auto auto;
        align-items: start;
        gap: var(--cerdo-desktop-gap);
    }

    #homeView > * {
        min-width: 0;
        order: initial;
    }

    #homeView > .home-market-preview {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: 100%;
        min-height: 510px;
        margin: 0;
        padding: 27px;
        border: 1px solid #d8e5dc;
        border-top: 0;
        border-radius: 24px;
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(90deg, #148044, #68b982, #8552b7) border-box;
        box-shadow: 0 18px 44px rgba(18, 73, 39, .08);
    }

    #homeView .home-market-preview-heading {
        align-items: flex-start;
        padding-bottom: 18px;
        border-bottom: 1px solid #e7eee9;
    }

    #homeView .home-market-preview-heading .home-card-heading-copy h2 {
        font-size: clamp(25px, 2vw, 32px);
        letter-spacing: -.65px;
    }

    #homeView .home-market-see-all {
        min-height: 42px;
        padding-inline: 15px;
        border-radius: 12px;
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    #homeView .home-market-see-all:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(17, 108, 57, .1);
    }

    #homeView .home-market-interwoven-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 16px;
        margin-top: 20px;
        padding: 0;
    }

    #homeView .home-market-interwoven-list .market-live-card {
        height: 100%;
        min-height: 205px;
        padding: 22px 18px;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: start;
        gap: 12px 14px;
        border-radius: 20px;
        transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
    }

    #homeView .home-market-interwoven-list .market-live-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 32px rgba(20, 76, 40, .11);
    }

    #homeView .home-market-interwoven-list .market-compact-copy {
        padding-right: 0;
    }

    #homeView .home-market-interwoven-list .market-compact-copy h4 {
        font-size: 16px;
        line-height: 1.3;
    }

    #homeView .home-market-interwoven-list .market-compact-price {
        grid-column: 2;
        width: 100%;
        min-width: 0;
        padding: 14px 0 0;
        align-items: flex-start;
        justify-self: stretch;
        border-top: 1px solid rgba(21, 105, 57, .11);
        text-align: left;
    }

    #homeView .home-market-interwoven-list .market-compact-price time {
        top: 18px;
        right: 18px;
    }

    #homeView .home-market-interwoven-list .market-live-card .market-compact-price strong {
        max-width: 100%;
        font-size: clamp(17px, 1.35vw, 22px);
        white-space: normal;
    }

    #homeView > .exact-market-card {
        grid-column: 2;
        grid-row: 1;
        min-height: 225px;
        margin: 0;
        padding: 23px;
        border-radius: 24px;
        box-shadow: 0 18px 40px rgba(7, 74, 36, .14);
    }

    #homeView .exact-market-price-row {
        grid-template-columns: minmax(0, 1fr) 70px;
        margin-top: 20px;
    }

    #homeView .hero.market-hero.exact-market-card .selected-place {
        font-size: 29px;
    }

    #homeView .hero.market-hero.exact-market-card .main-price {
        font-size: clamp(32px, 3vw, 45px);
    }

    #homeView > .zone-card {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        padding: 21px;
        border: 1px solid #d9e6dd;
        border-radius: 24px;
        box-shadow: 0 15px 36px rgba(18, 73, 39, .07);
    }

    #homeView .zone-card .zone-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    #homeView .zone-card .home-card-heading {
        grid-column: 1 / -1;
    }

    #homeView .zone-card .location-button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
        margin-top: 12px;
    }

    #homeView .zone-card .location-search {
        margin-top: 15px;
    }

    #homeView .zone-card .location-fields {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    #homeView > .stats {
        grid-column: 1 / -1;
        grid-row: 3;
        gap: 16px;
        margin: 0;
    }

    #homeView .stat-card {
        min-height: 104px;
        padding: 18px 20px;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas: "icon number" "icon label";
        column-gap: 15px;
        align-content: center;
        justify-items: start;
        border-radius: 20px;
        text-align: left;
    }

    #homeView .stat-card .stat-icon {
        grid-area: icon;
        width: 50px;
        height: 50px;
        margin: 0;
        border-radius: 15px;
    }

    #homeView .stat-card .stat-number {
        grid-area: number;
        font-size: 29px;
    }

    #homeView .stat-card .stat-label {
        grid-area: label;
        margin-top: 5px;
    }

    #homeView > .home-zone-prices-section {
        grid-column: 1 / -1;
        grid-row: 4;
        margin: 0;
        padding: 27px;
        border: 1px solid #d9e6dd;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 16px 38px rgba(18, 73, 39, .07);
    }

    #homeView .filters {
        gap: 14px;
        margin-top: 20px;
        padding: 16px;
        border: 1px solid #e2ebe5;
        border-radius: 17px;
        background: #f7faf8;
    }

    /* MERCADO: portada de catálogo y publicaciones en cuadrícula. */
    #marketView {
        max-width: 1380px;
    }

    #marketView .marketplace-header {
        min-height: 156px;
        margin: 0 0 20px;
        padding: 31px 34px;
        border-radius: 26px;
        box-shadow: 0 18px 42px rgba(7, 74, 36, .13);
    }

    #marketView .marketplace-header h2 {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    #marketView .marketplace-header p {
        margin-top: 8px;
        font-size: 14px;
    }

    #marketView .marketplace-icon-button,
    #marketView .marketplace-filter-button {
        min-height: 48px;
        border-radius: 14px;
    }

    #marketView .market-filter-summary {
        min-height: 76px;
        padding: 15px 18px;
        border-radius: 18px;
    }

    #marketView .market-type-summary {
        gap: 14px;
    }

    #marketView .market-type-card {
        min-height: 92px;
        padding: 17px 20px;
        border-radius: 19px;
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    #marketView .market-type-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(20, 76, 40, .08);
    }

    #marketView .market-interwoven-board {
        padding: 27px;
        border: 1px solid #d9e6dd;
        border-radius: 25px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(18, 73, 39, .07);
    }

    #marketView .market-interwoven-heading {
        margin-bottom: 20px;
        padding-bottom: 18px;
        border-bottom: 1px solid #e7eee9;
    }

    #marketView .market-interwoven-list,
    #marketView .market-interwoven-list.has-internal-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 16px;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: transparent;
    }

    #marketView .market-interwoven-list::before,
    #marketView .market-interwoven-list::after {
        display: none;
    }

    #marketView .market-live-card {
        width: 100%;
        min-height: 178px;
        margin: 0;
        padding: 21px;
        border-radius: 20px;
        transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
    }

    #marketView .market-live-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 31px rgba(20, 76, 40, .11);
    }

    #marketView .market-empty-state {
        grid-column: 1 / -1;
    }

    #marketView .market-load-more-bar {
        margin-left: 0;
    }

    /* ZONAS: tarjetas tipo directorio. */
    .zones-view {
        max-width: 1380px;
    }

    .zones-page-header {
        min-height: 145px;
        display: flex;
        align-items: center;
        padding: 30px 34px;
        border-radius: 25px;
        box-shadow: 0 18px 42px rgba(7, 74, 36, .12);
    }

    .zones-page-header h2 {
        font-size: 38px;
    }

    .zones-search-card {
        padding: 22px;
        border-radius: 20px;
    }

    .zones-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    .zone-result-card {
        min-height: 104px;
        padding: 18px;
        border-radius: 19px;
        transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .zone-result-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 13px 28px rgba(20, 76, 40, .09);
    }

    /* MÁS/CUENTA: el menú deja de verse como una lista móvil larga. */
    .account-hub-view {
        max-width: 1180px;
        padding-top: 0;
        padding-bottom: 45px;
    }

    .account-page-header,
    .account-subpage-header {
        min-height: 145px;
        padding: 28px 32px;
        border-radius: 25px;
    }

    .account-page-header h2,
    .account-subpage-header h2 {
        font-size: 35px;
    }

    .account-summary-card,
    .account-guest-card {
        padding: 21px;
        border-radius: 20px;
    }

    .account-menu-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
        border-radius: 22px;
        background: #e8efea;
    }

    .account-menu-item,
    .account-menu-item:last-child {
        min-height: 92px;
        border: 0;
        background: #fff;
    }

    .account-menu-item:hover {
        background: #f7faf8;
    }

    /* Formularios y diálogos aprovechan el escritorio sin hacerse enormes. */
    .create-market-view,
    .profile-view,
    .my-posts-view {
        max-width: 980px;
    }

    .profile-view,
    .my-posts-view {
        padding-bottom: 45px;
    }

    .market-filter-dialog {
        width: min(760px, calc(100vw - 80px));
        max-height: calc(100vh - 72px);
        border-radius: 24px;
    }

    .more-content-dialog {
        width: min(680px, calc(100vw - 80px));
    }

    .quick-create-overlay {
        padding: 40px;
    }

    .quick-create-dialog {
        border-radius: 24px;
        box-shadow: 0 30px 80px rgba(4, 38, 18, .24);
    }

    /* En escritorio ya no hace falta reservar espacio para una barra inferior. */
    .report-area {
        bottom: 24px;
    }

    .app-footer {
        padding-bottom: 20px;
    }
}

/* Escritorios medianos: una sola columna de publicaciones evita compresión. */
@media (min-width: 1180px) and (max-width: 1320px) and (hover: hover) and (pointer: fine) {
    :root {
        --cerdo-desktop-sidebar: 350px;
    }

    #homeView .home-market-interwoven-list,
    #marketView .market-interwoven-list,
    #marketView .market-interwoven-list.has-internal-scroll {
        grid-template-columns: 1fr;
    }

    #homeView .home-market-interwoven-list .market-live-card {
        min-height: 164px;
    }
}

/* Pantallas grandes: limita las líneas para mantener lectura editorial. */
@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
    .app-header .header-content {
        width: min(1540px, 100%);
    }

    .container {
        width: min(1480px, calc(100% - 96px));
    }
}

/* =========================================================
   V21 · TRES EXPERIENCIAS, UNA SOLA PLATAFORMA

   1) App Android: conserva el diseño móvil existente.
   2) Web móvil/tableta: cabecera editorial + menú lateral.
   3) Web escritorio: dashboard profesional con contexto a la izquierda.
   ========================================================= */

/* Controles exclusivos de navegador web móvil. */
.web-mobile-menu-button,
.web-mobile-menu-backdrop {
    display: none;
}

/* =========================================================
   WEB MÓVIL Y TABLETA WEB
   ========================================================= */
@media (max-width: 1179px) {
    html.cerdo-web-browser {
        background: #eef4f0;
    }

    html.cerdo-web-browser body {
        padding-bottom: 0;
        background:
            radial-gradient(circle at 100% 0, rgba(20, 128, 68, .08), transparent 19rem),
            linear-gradient(180deg, #f8fbf9 0%, #f1f6f3 100%);
    }

    /* Cabecera propia del sitio móvil. */
    html.cerdo-web-browser .app-header {
        position: sticky;
        top: 0;
        z-index: 1300;
        min-height: 70px;
        padding: 10px 14px;
        border-bottom: 1px solid #dce7df;
        background: rgba(255, 255, 255, .96);
        color: var(--cerdo-green-900);
        box-shadow: 0 6px 22px rgba(15, 72, 36, .08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    html.cerdo-web-browser .app-header .header-content {
        width: 100%;
        min-height: 50px;
        gap: 10px;
    }

    html.cerdo-web-browser .web-mobile-menu-button {
        width: 45px;
        height: 45px;
        min-width: 45px;
        flex: 0 0 45px;
        padding: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid #cfe0d5;
        border-radius: 13px;
        background: #f3f9f5;
        color: var(--cerdo-green-800);
        cursor: pointer;
    }

    html.cerdo-web-browser .web-mobile-menu-button > span {
        width: 19px;
        height: 2px;
        display: block;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: transform 180ms ease, opacity 150ms ease;
    }

    html.cerdo-web-browser body.web-mobile-menu-open
    .web-mobile-menu-button > span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    html.cerdo-web-browser body.web-mobile-menu-open
    .web-mobile-menu-button > span:nth-child(2) {
        opacity: 0;
    }

    html.cerdo-web-browser body.web-mobile-menu-open
    .web-mobile-menu-button > span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    html.cerdo-web-browser .app-header .brand {
        gap: 9px;
    }

    html.cerdo-web-browser .app-header .pig-logo {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border: 2px solid #fff;
        border-radius: 14px;
        box-shadow: 0 5px 14px rgba(20, 92, 48, .12);
        font-size: 25px;
    }

    html.cerdo-web-browser .app-header .brand h1 {
        color: var(--cerdo-green-900);
        font-size: 20px;
    }

    html.cerdo-web-browser .app-header .brand p {
        display: block;
        margin-top: 2px;
        color: #718078;
        font-size: 9px;
    }

    html.cerdo-web-browser .app-header .admin-actions {
        gap: 6px;
    }

    html.cerdo-web-browser .app-header .admin-button,
    html.cerdo-web-browser .header-icon-button,
    html.cerdo-web-browser .app-header .session-icon-button {
        width: 43px;
        height: 43px;
        min-width: 43px;
        min-height: 43px;
        padding: 0;
        border: 1px solid #cfe0d5;
        border-radius: 13px;
        background: #f3f9f5;
        color: var(--cerdo-green-800);
    }

    html.cerdo-web-browser .app-header .admin-button .admin-label-panel {
        display: none;
    }

    /* Fondo que acompaña el menú lateral. */
    html.cerdo-web-browser .web-mobile-menu-backdrop {
        position: fixed;
        inset: 70px 0 0;
        z-index: 1200;
        width: 100%;
        height: calc(100dvh - 70px);
        padding: 0;
        border: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(8, 27, 16, .52);
        cursor: default;
        pointer-events: none;
        transition: opacity 200ms ease, visibility 200ms ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    html.cerdo-web-browser body.web-mobile-menu-open
    .web-mobile-menu-backdrop {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    html.cerdo-web-browser body.web-mobile-menu-open {
        overflow: hidden;
    }

    /* La navegación inferior se transforma en un panel lateral web. */
    html.cerdo-web-browser .bottom-navigation {
        position: fixed;
        top: 70px;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 1280;
        width: min(86vw, 340px);
        max-width: 340px;
        height: calc(100dvh - 70px);
        min-height: calc(100dvh - 70px);
        max-height: calc(100dvh - 70px);
        margin: 0;
        padding: 74px 18px 24px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0;
        border-right: 1px solid #dce7df;
        border-radius: 0 22px 0 0;
        background: #fff;
        box-shadow: 20px 0 50px rgba(8, 47, 24, .14);
        transform: translateX(-105%) !important;
        transition: transform 220ms cubic-bezier(.22, .75, .28, 1) !important;
    }

    html.cerdo-web-browser .bottom-navigation::before {
        content: "Explorar Cerdo RD";
        position: absolute;
        top: 25px;
        left: 22px;
        color: var(--cerdo-green-900);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    html.cerdo-web-browser body.web-mobile-menu-open
    .bottom-navigation {
        transform: translateX(0) !important;
    }

    html.cerdo-web-browser .bottom-nav-item,
    html.cerdo-web-browser .bottom-create-wrapper {
        width: 100%;
        height: 56px;
        min-height: 56px;
        max-height: 56px;
        flex: 0 0 56px;
    }

    html.cerdo-web-browser .bottom-nav-item {
        padding: 0 15px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 13px;
        border: 1px solid transparent;
        border-radius: 14px;
        color: #506259;
        transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
    }

    html.cerdo-web-browser .bottom-nav-item:hover {
        color: var(--cerdo-green-800);
        background: #f4f9f6;
    }

    html.cerdo-web-browser .bottom-nav-item.active {
        border-color: #cee4d5;
        color: var(--cerdo-green-800);
        background: #eaf6ee;
    }

    html.cerdo-web-browser .bottom-nav-item svg {
        width: 23px;
        height: 23px;
        min-width: 23px;
        min-height: 23px;
        flex-basis: 23px;
    }

    html.cerdo-web-browser .bottom-nav-item span {
        width: auto;
        height: auto;
        min-height: 0;
        font-size: 14px;
        font-weight: 780;
        line-height: 1;
    }

    html.cerdo-web-browser .bottom-create-wrapper {
        position: static;
        order: 5;
        margin-top: 8px;
    }

    html.cerdo-web-browser .bottom-create-button {
        position: static;
        width: 100%;
        height: 52px;
        min-width: 0;
        min-height: 52px;
        padding: 0 16px;
        justify-content: flex-start;
        gap: 11px;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 9px 22px rgba(8, 115, 51, .2);
        transform: none;
    }

    html.cerdo-web-browser .bottom-create-button:active {
        transform: translateY(1px);
    }

    html.cerdo-web-browser .bottom-create-button span,
    html.cerdo-web-browser .bottom-create-button[aria-expanded="true"] span {
        width: 23px;
        font-size: 31px;
        transform: translateY(-1px);
    }

    html.cerdo-web-browser .bottom-create-button::after {
        content: "Crear publicación";
        color: #fff;
        font-size: 14px;
        font-weight: 820;
    }

    /* El contenido web ya no reserva espacio para la barra de la app. */
    html.cerdo-web-browser .container {
        width: min(94%, 980px);
        margin: 18px auto 42px;
        padding-bottom: 0;
    }

    html.cerdo-web-browser .container.app-view {
        animation: cerdoWebMobileIn 190ms ease-out both;
    }

    @keyframes cerdoWebMobileIn {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Inicio web: referencia, actividad y luego herramientas de ubicación. */
    html.cerdo-web-browser #homeView:not([hidden]) {
        display: flex;
        flex-direction: column;
    }

    html.cerdo-web-browser #homeView > .exact-market-card {
        order: 1;
    }

    html.cerdo-web-browser #homeView > .home-market-preview {
        order: 2;
        margin-top: 14px;
    }

    html.cerdo-web-browser #homeView > .zone-card {
        order: 3;
        margin-top: 14px;
    }

    html.cerdo-web-browser #homeView > .stats {
        order: 4;
    }

    html.cerdo-web-browser #homeView > .home-zone-prices-section {
        order: 5;
    }

    html.cerdo-web-browser #homeView .exact-market-card,
    html.cerdo-web-browser #homeView .home-market-preview,
    html.cerdo-web-browser #homeView .zone-card,
    html.cerdo-web-browser #homeView .home-zone-prices-section {
        border-radius: 22px;
        box-shadow: 0 12px 30px rgba(18, 73, 39, .065);
    }

    /* Mercado web móvil: cabecera de página clara, no cabecera de app. */
    html.cerdo-web-browser #marketView .marketplace-header {
        margin: 0 0 15px;
        padding: 21px 19px;
        border: 1px solid #d6e6db;
        border-top: 4px solid var(--cerdo-green-700);
        border-radius: 22px;
        background: #fff;
        color: var(--cerdo-green-900);
        box-shadow: 0 12px 30px rgba(18, 73, 39, .065);
    }

    html.cerdo-web-browser #marketView .marketplace-kicker {
        color: var(--cerdo-green-600);
    }

    html.cerdo-web-browser #marketView .marketplace-header h2 {
        color: var(--cerdo-green-950);
    }

    html.cerdo-web-browser #marketView .marketplace-header p {
        color: #66776d;
    }

    html.cerdo-web-browser #marketView .marketplace-icon-button,
    html.cerdo-web-browser #marketView .marketplace-filter-button {
        border-color: #cbe0d2;
        background: #eff8f2;
        color: var(--cerdo-green-800);
    }

    /* Zonas y Más siguen la misma identidad editorial del sitio. */
    html.cerdo-web-browser .zones-page-header,
    html.cerdo-web-browser .account-page-header,
    html.cerdo-web-browser .account-subpage-header {
        border: 1px solid #d6e6db;
        border-top: 4px solid var(--cerdo-green-700);
        color: var(--cerdo-green-950);
        background: #fff;
        box-shadow: 0 12px 30px rgba(18, 73, 39, .065);
    }

    html.cerdo-web-browser .zones-page-header span,
    html.cerdo-web-browser .account-page-kicker,
    html.cerdo-web-browser .account-subpage-header > div > span {
        color: var(--cerdo-green-600);
    }

    html.cerdo-web-browser .zones-page-header h2,
    html.cerdo-web-browser .account-page-header h2,
    html.cerdo-web-browser .account-subpage-header h2 {
        color: var(--cerdo-green-950);
    }

    html.cerdo-web-browser .zones-page-header p,
    html.cerdo-web-browser .account-page-header p,
    html.cerdo-web-browser .account-subpage-header p {
        color: #66776d;
    }

    html.cerdo-web-browser .account-page-icon,
    html.cerdo-web-browser .account-back-button {
        border-color: #cbe0d2;
        color: var(--cerdo-green-800);
        background: #eff8f2;
    }

    html.cerdo-web-browser .account-hub-view,
    html.cerdo-web-browser .profile-view,
    html.cerdo-web-browser .my-posts-view {
        padding-bottom: 20px;
    }

    html.cerdo-web-browser .app-footer {
        padding-bottom: 22px;
    }
}

/* Teléfonos web estrechos: protege marca, acciones y tarjetas. */
@media (max-width: 430px) {
    html.cerdo-web-browser .app-header {
        padding-inline: 10px;
    }

    html.cerdo-web-browser .app-header .brand p {
        display: none;
    }

    html.cerdo-web-browser .app-header .brand h1 {
        font-size: 18px;
    }

    html.cerdo-web-browser .app-header .pig-logo {
        width: 41px;
        height: 41px;
        flex-basis: 41px;
        font-size: 23px;
    }

    html.cerdo-web-browser .web-mobile-menu-button,
    html.cerdo-web-browser .app-header .admin-button,
    html.cerdo-web-browser .header-icon-button,
    html.cerdo-web-browser .app-header .session-icon-button {
        width: 41px;
        height: 41px;
        min-width: 41px;
        min-height: 41px;
    }

    html.cerdo-web-browser .bottom-navigation {
        width: min(88vw, 326px);
    }

    html.cerdo-web-browser .container {
        width: calc(100% - 20px);
        margin-top: 12px;
    }

    html.cerdo-web-browser #homeView .home-market-preview,
    html.cerdo-web-browser #homeView .zone-card,
    html.cerdo-web-browser #homeView .home-zone-prices-section {
        padding: 14px;
        border-radius: 19px;
    }

    html.cerdo-web-browser #marketView .marketplace-header {
        align-items: flex-start;
        padding: 18px 15px;
        border-radius: 19px;
    }
}

/* =========================================================
   ESCRITORIO V21 · CONTEXTO A LA IZQUIERDA
   ========================================================= */
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
    #homeView:not([hidden]) {
        grid-template-columns: var(--cerdo-desktop-sidebar) minmax(0, 1fr);
    }

    #homeView > .exact-market-card {
        grid-column: 1;
        grid-row: 1;
    }

    #homeView > .zone-card {
        grid-column: 1;
        grid-row: 2;
    }

    #homeView > .home-market-preview {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* El aviso legal ocupa las dos columnas y queda centrado en escritorio. */
    html.cerdo-web-browser #homeView > .cerdo-screen-copyright {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

/* Si JavaScript está deshabilitado, la app nativa conserva su barra inferior. */
html:not(.cerdo-web-browser) .web-mobile-menu-button,
html:not(.cerdo-web-browser) .web-mobile-menu-backdrop {
    display: none !important;
}
/* =========================================================
   V24 · IDENTIDAD EXACTA CERDO RD
   Usa sin redibujar el sello original entregado por el propietario.
========================================================= */
.app-header .pig-logo,
html.cerdo-web-browser .app-header .pig-logo {
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 15px;
}

.app-header .pig-logo img,
html.cerdo-web-browser .app-header .pig-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.exact-market-pig {
    overflow: hidden;
}

.exact-market-pig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 24%;
}

.market-empty-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 22%;
}

@media (max-width: 560px) {
    .exact-market-pig img {
        border-radius: 22%;
    }
}
/* =========================================================
   PUBLICAR VENTA — FOTOS Y VIDEO
   ========================================================= */

.sell-media-card {
    overflow: hidden;
}

.sell-media-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sell-media-action {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 14px;

    border: 1px dashed var(--cerdo-border);
    border-radius: 16px;

    background: #f8faf8;

    text-align: center;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.sell-media-action:hover {
    border-color: var(--cerdo-green-800);
    background: var(--cerdo-green-100);
}

.sell-media-action:active {
    transform: scale(0.98);
}

.sell-media-action-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: var(--cerdo-green-100);

    font-size: 20px;
}

.sell-media-action strong {
    display: block;

    color: var(--cerdo-text);

    font-size: 14px;
    line-height: 1.25;
}

.sell-media-action small {
    display: block;

    margin-top: 4px;

    color: var(--cerdo-muted);

    font-size: 12px;
    line-height: 1.35;
}

.sell-media-preview {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(105px, 1fr));

    gap: 10px;

    margin-top: 16px;
}

.sell-media-help {
    margin-top: 14px;

    padding: 13px 14px;

    border-radius: 14px;

    background: #f4f7f4;
}

.sell-media-help strong {
    display: block;

    margin-bottom: 4px;

    color: var(--cerdo-text);

    font-size: 13px;
}

.sell-media-help p {
    margin: 0;

    color: var(--cerdo-muted);

    font-size: 12px;
    line-height: 1.45;
}

.sell-media-message {
    margin-top: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    background: #fff3f2;

    color: #9f2d26;

    font-size: 13px;
    line-height: 1.4;
}

.sell-upload-progress {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(10, 113, 56, 0.16);
    border-radius: 13px;
    background: #f2faf5;
    color: var(--cerdo-green-800);
    font-size: 12.5px;
    font-weight: 800;
}

.sell-upload-progress[hidden] {
    display: none;
}

.sell-upload-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(10, 113, 56, 0.13);
}

.sell-upload-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cerdo-green-800), var(--cerdo-green-500));
    transition: width 180ms ease;
}

@media (max-width: 700px) {
    .sell-media-actions {
        grid-template-columns: 1fr;
    }

    .sell-media-action {
        min-height: 0;

        flex-direction: row;
        justify-content: flex-start;

        text-align: left;
    }

    .sell-media-action-icon {
        flex: 0 0 42px;
    }
}
/* =========================================================
   PUBLICAR VENTA — PREVISUALIZACIÓN DE FOTOS
   ========================================================= */

.sell-media-preview-item {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border: 1px solid var(--cerdo-border);
    border-radius: 14px;

    background: #eef2ef;
}

.sell-media-preview-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.sell-media-preview-remove {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(20, 25, 22, 0.78);

    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.sell-media-preview-remove:hover {
    background: rgba(20, 25, 22, 0.95);
}

.sell-media-preview-remove:active {
    transform: scale(0.94);
}

.sell-media-preview-remove:focus-visible {
    outline: 3px solid var(--cerdo-green-100);
    outline-offset: 2px;
}

@media (max-width: 430px) {
    .sell-media-preview {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   MERCADO · VENTA CON MULTIMEDIA
   Portada lateral aprobada, integrada al diseño actual.
   Las ventas sin multimedia conservan .market-live-card.
   ========================================================= */

.market-sale-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    min-height: 150px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    padding: 12px;
    border: 1.5px solid #d3e7d8;
    border-radius: 20px;
    background: #ffffff;
    color: #173824;
    box-shadow: 0 6px 18px rgba(21, 65, 37, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.market-sale-card:hover {
    border-color: #b9d8c1;
    box-shadow: 0 9px 24px rgba(21, 65, 37, 0.08);
}

.market-sale-card:active {
    transform: scale(0.995);
}

.market-sale-card:focus-visible {
    outline: 3px solid rgba(12, 154, 76, 0.24);
    outline-offset: 3px;
}

.market-sale-card-cover {
    position: relative;
    width: 112px;
    min-height: 126px;
    align-self: stretch;
    overflow: hidden;
    border-radius: 15px;
    background: #e7f3ea;
}

.market-sale-card-cover > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.market-sale-card-cover-empty,
.market-sale-card-cover-error,
.market-sale-card-video-cover {
    width: 100%;
    height: 100%;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(145deg, #eaf7ed, #dceee1);
}

.market-sale-card-cover-empty img {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
    opacity: 0.7;
}

.market-sale-card-video-cover {
    background:
        radial-gradient(circle at 76% 18%, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(145deg, #075c30, #0b7b40);
    color: #ffffff;
}

.market-sale-card-video-play {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}

.market-sale-card-video-play svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.market-sale-card-video-cover small {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.market-sale-card-cover-error {
    padding: 9px;
    color: #41634c;
    text-align: center;
}

.market-sale-card-cover-error svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-sale-card-cover-error small {
    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;
}

.market-sale-card-media-badges {
    position: absolute;
    left: 7px;
    bottom: 7px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

.market-sale-card-badge {
    min-width: 27px;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 9px;
    background: rgba(12, 24, 16, 0.82);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(0,0,0,0.14);
    backdrop-filter: blur(5px);
}

.market-sale-card-badge svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-sale-card-video-badge svg {
    fill: currentColor;
    stroke: none;
}

.market-sale-card-main {
    min-width: 0;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    padding: 2px 1px 1px 0;
}

.market-sale-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.market-sale-card-status {
    color: #08733a;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.025em;
}

.market-sale-card-date {
    flex: 0 0 auto;
    color: #748077;
    font-size: 10.5px;
    line-height: 1;
}

.market-sale-card-title {
    margin: 0 0 5px;
    color: #153722;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.market-sale-card-meta {
    margin: 0 0 7px;
    color: #66756b;
    font-size: 11.5px;
    line-height: 1.3;
}

.market-sale-card-bottom {
    min-width: 0;
    margin-top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
}

.market-sale-card-identity {
    min-width: 0;
}

.market-sale-card-farm {
    margin: 0 0 3px;
    color: #225838;
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-sale-card-location {
    margin: 0;
    display: -webkit-box;
    color: #6b776f;
    font-size: 10.5px;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-sale-location-pin {
    color: #ef4444;
    font-size: 9px;
}

.market-sale-card-price-box {
    min-width: 82px;
    max-width: 128px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.market-sale-card-price {
    color: #08783d;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.market-sale-card-price-sub {
    margin-top: 4px;
    color: #285e3c;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.12;
}

/* =========================================================
   DETALLE DE VENTA · DISEÑO A APROBADO
   ========================================================= */

.market-sale-detail-dialog {
    width: min(720px, calc(100vw - 28px));
    max-width: 720px;
    height: min(920px, calc(100dvh - 28px));
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: #f6faf7;
    color: #173824;
    overflow: hidden;
    box-shadow: 0 26px 76px rgba(8, 42, 23, 0.28);
}

.market-sale-detail-dialog::backdrop {
    background: rgba(7, 26, 15, 0.58);
    backdrop-filter: blur(3px);
}

.market-sale-detail-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f6faf7;
}

.market-sale-detail-header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 66px;
    padding: max(11px, env(safe-area-inset-top)) 14px 11px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    background: linear-gradient(135deg, #076634 0%, #078545 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

.market-sale-detail-header h2 {
    margin: 0;
    color: #ffffff;
    text-align: center;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.1;
}

.market-sale-detail-back,
.market-sale-detail-more {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.market-sale-detail-back:hover,
.market-sale-detail-more:hover,
.market-sale-detail-back:focus-visible,
.market-sale-detail-more:focus-visible {
    background: rgba(255,255,255,0.12);
    outline: none;
}

.market-sale-detail-back svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-sale-detail-more {
    flex-direction: column;
    gap: 4px;
}

.market-sale-detail-more span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.market-sale-detail-media {
    flex: 0 0 auto;
    background: #ffffff;
}

.market-sale-detail-media[hidden] {
    display: none !important;
}

.market-sale-detail-stage {
    position: relative;
    width: 100%;
    height: clamp(280px, 43vw, 350px);
    overflow: hidden;
    background: #e7efe9;
}

.market-sale-detail-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.market-sale-detail-viewport > img,
.market-sale-detail-viewport > video {
    width: 100%;
    height: 100%;
    display: block;
}

.market-sale-detail-viewport > img {
    object-fit: cover;
    cursor: zoom-in;
}

.market-sale-detail-viewport > video {
    object-fit: contain;
    background: #08100b;
}

.market-sale-detail-viewport.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(8, 120, 61, 0.2);
    border-top-color: #08783d;
    border-radius: 50%;
    animation: market-sale-media-spin 720ms linear infinite;
}

@keyframes market-sale-media-spin {
    to { transform: rotate(360deg); }
}

.market-sale-detail-media-error {
    width: 100%;
    height: 100%;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px;
    color: #45624f;
    text-align: center;
    background: linear-gradient(145deg, #eef7f0, #e1ede4);
}

.market-sale-detail-media-error svg {
    width: 42px;
    height: 42px;
    margin-bottom: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-sale-detail-media-error strong {
    font-size: 14px;
}

.market-sale-detail-media-error small {
    color: #718078;
    font-size: 11px;
}

.market-sale-detail-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 17px;
    background: rgba(12, 22, 15, 0.76);
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(5px);
}

.market-sale-detail-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(12, 22, 15, 0.58);
    color: #ffffff;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.market-sale-detail-nav:hover,
.market-sale-detail-nav:focus-visible {
    background: rgba(8, 112, 57, 0.9);
    outline: none;
}

.market-sale-detail-nav.prev { left: 13px; }
.market-sale-detail-nav.next { right: 13px; }
.market-sale-detail-nav[hidden] { display: none !important; }

.market-sale-detail-badges {
    position: absolute;
    left: 13px;
    bottom: 12px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.market-sale-detail-badges:empty { display: none; }

.market-sale-detail-badges .market-sale-card-badge {
    min-height: 29px;
    padding: 6px 9px;
    border-radius: 15px;
    font-size: 11.5px;
}

.market-sale-detail-badges .market-sale-card-badge svg {
    width: 15px;
    height: 15px;
}

.market-sale-detail-dots {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: #ffffff;
}

.market-sale-detail-dots:empty { display: none; }

.market-sale-detail-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfd9d2;
    cursor: pointer;
    transition: width 150ms ease, background 150ms ease;
}

.market-sale-detail-dots button.active {
    width: 20px;
    border-radius: 8px;
    background: #078343;
}

.market-sale-detail-expand-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 104;
    width: 44px;
    height: 44px;
    padding: 0 0 4px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    background: rgba(10, 16, 12, 0.68);
    color: #ffffff;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.market-sale-detail-expand-close[hidden] {
    display: none !important;
}

.market-sale-detail-expand-button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    /* Debajo del encabezado sticky del detalle para que no tape el título. */
    z-index: 20;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 22px;
    background: rgba(7, 29, 16, .84);
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    backdrop-filter: blur(6px);
}

.market-sale-detail-expand-button[hidden],
.market-sale-detail-dialog.is-media-expanded .market-sale-detail-expand-button {
    display: none !important;
}

.market-sale-detail-body {
    flex: 1 0 auto;
    padding: 0 12px 20px;
    background: #f6faf7;
}

.market-sale-detail-media[hidden] + .market-sale-detail-body {
    padding-top: 12px;
}

.market-sale-detail-card {
    position: relative;
    margin: 0;
    padding: 20px 18px 18px;
    border: 1px solid #d9e7dc;
    border-radius: 0 0 22px 22px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(12, 57, 30, 0.05);
}

.market-sale-detail-media[hidden] + .market-sale-detail-body .market-sale-detail-card {
    border-radius: 22px;
}

.market-sale-detail-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.market-sale-detail-type {
    color: #08783d;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.market-sale-detail-date {
    color: #76827a;
    font-size: 12px;
}

.market-sale-detail-title {
    margin: 0 0 8px;
    color: #123521;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.13;
}

.market-sale-detail-price-group {
    margin-bottom: 18px;
}

.market-sale-detail-price {
    display: block;
    color: #078843;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
}

.market-sale-detail-price-meta {
    display: block;
    margin-top: 4px;
    color: #335b41;
    font-size: 13px;
    font-weight: 750;
}

.market-sale-detail-facts {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}

.market-sale-detail-facts li {
    min-width: 0;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #e0ebe3;
    border-radius: 12px;
    background: #f7fbf8;
    color: #4a6253;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.market-sale-detail-divider {
    height: 1px;
    margin: 18px 0 14px;
    background: #dce5de;
}

.market-sale-detail-section h4 {
    margin: 0 0 7px;
    color: #173825;
    font-size: 15px;
    font-weight: 850;
}

.market-sale-detail-section p {
    margin: 0;
    color: #3d5145;
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-line;
}

.market-sale-detail-video-note,
.market-sale-detail-contact-note {
    margin-top: 15px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    background: #edf8f0;
    color: #175d34;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;
}

.market-sale-detail-video-note[hidden] { display: none !important; }

.market-sale-detail-note-icon,
.market-sale-detail-info-icon {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0a8040;
    border-radius: 50%;
    color: #087a3d;
    font-size: 12px;
    font-weight: 900;
}

.market-sale-detail-info-icon {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.market-sale-detail-actions {
    margin-top: 14px;
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    gap: 10px;
    padding: 12px 0 max(2px, env(safe-area-inset-bottom));
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0,
        rgba(255,255,255,0.96) 14px,
        #ffffff 30px
    );
}

.market-sale-detail-contact,
.market-sale-detail-call {
    width: 100%;
    min-height: 54px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 850;
    cursor: pointer;
}

.market-sale-detail-contact {
    border: 0;
    background: linear-gradient(135deg, #0a9448 0%, #07833f 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 134, 65, 0.17);
}

.market-sale-detail-contact:hover,
.market-sale-detail-contact:focus-visible {
    background: linear-gradient(135deg, #087f3f 0%, #066f36 100%);
    outline: 3px solid rgba(10, 148, 72, 0.18);
    outline-offset: 2px;
}

.market-sale-detail-contact svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.market-sale-detail-call {
    border: 1.5px solid #078943;
    background: #ffffff;
    color: #087943;
}

.market-sale-detail-call[hidden] { display: none !important; }

.market-sale-detail-call svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

/* Foto ampliada dentro del mismo detalle. */
.market-sale-detail-dialog.is-media-expanded {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: #050806;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-shell {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: #050806;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-stage {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100vw;
    height: 100dvh;
    background: #050806;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-viewport {
    touch-action: none;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-viewport > img,
.market-sale-detail-dialog.is-media-expanded .market-sale-detail-viewport > video {
    object-fit: contain;
    cursor: zoom-out;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-counter {
    top: max(20px, env(safe-area-inset-top));
    left: 16px;
    right: auto;
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-badges {
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px));
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-dots {
    position: fixed;
    left: 50%;
    bottom: max(17px, env(safe-area-inset-bottom));
    z-index: 103;
    min-height: 34px;
    padding: 9px 13px;
    border-radius: 18px;
    transform: translateX(-50%);
    background: rgba(10, 16, 12, 0.72);
    backdrop-filter: blur(5px);
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-dots button {
    background: rgba(255,255,255,0.45);
}

.market-sale-detail-dialog.is-media-expanded .market-sale-detail-dots button.active {
    background: #ffffff;
}

@media (min-width: 900px) {
    /* En computadora el contacto se realiza por WhatsApp. */
    .market-sale-detail-call,
    .contact-call-button,
    #contactCallButton {
        display: none !important;
    }

    /* Visor grande de fotografías en escritorio. */
    .market-sale-detail-dialog.is-media-expanded .market-sale-detail-stage {
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-height: none;
    }

    .market-sale-detail-dialog.is-media-expanded .market-sale-detail-viewport > img {
        max-width: 100vw;
        max-height: 100dvh;
        object-fit: contain;
    }

    #marketView .market-sale-card {
        grid-template-columns: 124px minmax(0, 1fr);
        min-height: 164px;
        padding: 14px;
    }

    #marketView .market-sale-card-cover,
    #marketView .market-sale-card-cover-empty,
    #marketView .market-sale-card-cover-error,
    #marketView .market-sale-card-video-cover {
        width: 124px;
        min-height: 136px;
    }

    #marketView .market-sale-card-main {
        min-height: 136px;
    }

    #marketView .market-sale-card-title {
        font-size: 18px;
    }

    #homeView .home-market-interwoven-list .market-sale-card {
        display: grid;
        height: 100%;
        min-height: 205px;
        grid-template-columns: 112px minmax(0, 1fr);
        padding: 12px;
        border-radius: 20px;
    }

    #homeView .home-market-interwoven-list .market-sale-card-cover,
    #homeView .home-market-interwoven-list .market-sale-card-cover-empty,
    #homeView .home-market-interwoven-list .market-sale-card-cover-error,
    #homeView .home-market-interwoven-list .market-sale-card-video-cover {
        display: block;
        width: 112px;
        min-height: 178px;
        overflow: hidden;
        border-radius: 15px;
    }

    #homeView .home-market-interwoven-list .market-sale-card-cover > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #homeView .home-market-interwoven-list .market-sale-card-main {
        min-height: 178px;
    }
}

@media (max-width: 720px) {
    .market-sale-detail-dialog {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .market-sale-detail-dialog::backdrop {
        background: #ffffff;
        backdrop-filter: none;
    }

    .market-sale-detail-shell {
        height: 100dvh;
    }

    .market-sale-detail-header {
        min-height: 62px;
    }

    .market-sale-detail-stage {
        height: 270px;
    }

    .market-sale-detail-body {
        padding: 0 10px calc(22px + env(safe-area-inset-bottom));
    }

    .market-sale-detail-media[hidden] + .market-sale-detail-body {
        padding-top: 10px;
    }

    .market-sale-detail-card {
        padding: 18px 15px 16px;
        border-radius: 0 0 20px 20px;
    }

    .market-sale-detail-media[hidden] + .market-sale-detail-body .market-sale-detail-card {
        border-radius: 20px;
    }

    .market-sale-detail-title {
        font-size: 21px;
    }

    .market-sale-detail-price {
        font-size: 28px;
    }
}

@media (max-width: 520px) {
    .market-sale-card {
        min-height: 142px;
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 11px;
        padding: 10px;
        border-radius: 18px;
    }

    .market-sale-card-cover,
    .market-sale-card-cover-empty,
    .market-sale-card-cover-error,
    .market-sale-card-video-cover {
        width: 94px;
        min-height: 120px;
        border-radius: 13px;
    }

    .market-sale-card-main {
        min-height: 120px;
        padding-top: 1px;
    }

    .market-sale-card-topline {
        margin-bottom: 5px;
    }

    .market-sale-card-title {
        font-size: 15.5px;
    }

    .market-sale-card-meta,
    .market-sale-card-farm {
        font-size: 10.5px;
    }

    .market-sale-card-location {
        font-size: 9.75px;
    }

    .market-sale-card-price-box {
        min-width: 72px;
        max-width: 105px;
    }

    .market-sale-card-price {
        font-size: 16px;
    }

    .market-sale-card-price-sub {
        font-size: 8.5px;
    }

    .market-sale-detail-facts {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

@media (max-width: 380px) {
    .market-sale-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
    }

    .market-sale-card-cover,
    .market-sale-card-cover-empty,
    .market-sale-card-cover-error,
    .market-sale-card-video-cover {
        width: 84px;
    }

    .market-sale-card-title {
        font-size: 14.5px;
    }

    .market-sale-card-status,
    .market-sale-card-date {
        font-size: 9.5px;
    }

    .market-sale-card-bottom {
        gap: 6px;
    }

    .market-sale-card-price-box {
        min-width: 64px;
    }

    .market-sale-card-price {
        font-size: 14.5px;
    }

    .market-sale-detail-stage {
        height: 242px;
    }

    .market-sale-detail-header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .market-sale-detail-header h2 {
        font-size: 17px;
    }

    .market-sale-detail-title {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-sale-card,
    .market-sale-detail-dots button {
        transition: none;
    }

    .market-sale-detail-viewport.is-loading::after {
        animation-duration: 1.5s;
    }
}

/* =========================================================
   MIS PUBLICACIONES + EDITOR RESPONSIVE V5
   ========================================================= */
.my-post-card-v5 {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
    padding: 13px;
    overflow: hidden;
}

.my-post-cover-v5 {
    position: relative;
    min-height: 152px;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(145deg, #e9f5ec, #dcebe0);
}

.my-post-cover-v5 img {
    width: 100%;
    height: 100%;
    min-height: 152px;
    display: block;
    object-fit: cover;
}

.my-post-cover-empty-v5 {
    width: 100%;
    height: 100%;
    min-height: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #39714f;
    text-align: center;
}

.my-post-cover-empty-v5 b { font-size: 28px; }
.my-post-cover-empty-v5 small { font-size: 10px; font-weight: 750; }

.my-post-media-badges-v5 {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.my-post-media-badges-v5 span {
    padding: 5px 7px;
    border-radius: 12px;
    background: rgba(8, 25, 14, .74);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.my-post-content-v5 { min-width: 0; }
.my-post-card-v5 h3 { margin-top: 9px; }
.my-post-expiry-v5 { color: #0b7540; font-weight: 800; }
.my-post-expiry-v5.is-urgent { color: #b15b00; }

.my-post-actions-v5 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.my-post-actions-v5 button:first-child {
    background: #087d40;
    border-color: #087d40;
    color: #fff;
}

.post-edit-dialog-v5 {
    width: min(900px, calc(100vw - 28px));
    max-width: 900px;
    height: min(940px, calc(100dvh - 28px));
    max-height: calc(100dvh - 28px);
    padding: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #f4f8f5;
}

.post-edit-dialog-v5 form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-edit-v5-header {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 70px;
    padding: max(11px, env(safe-area-inset-top)) 14px 11px !important;
    background: linear-gradient(135deg, #076634, #078545) !important;
    color: #fff;
}

.post-edit-v5-header > div { text-align: center; }
.post-edit-v5-header span,
.post-edit-v5-header h2 { color: #fff !important; }

.post-edit-v5-back,
.post-edit-v5-close {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
    font-size: 29px !important;
    line-height: 1 !important;
}

.post-edit-v5-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
}

.post-edit-v5-section,
.post-edit-v5-preview {
    margin-bottom: 13px;
    padding: 16px;
    border: 1px solid #dbe8df;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(13, 66, 34, .05);
}

.post-edit-v5-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.post-edit-v5-section-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-edit-v5-section-heading > div > span {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e8f6ec;
    color: #087a3e;
    font-size: 11px;
    font-weight: 900;
}

.post-edit-v5-section-heading h3 {
    margin: 0;
    color: #173a25;
    font-size: 16px;
}

.post-edit-v5-section-heading p {
    margin: 3px 0 0;
    color: #68786d;
    font-size: 11px;
}

.post-edit-v5-section-heading > strong {
    color: #087a3e;
    font-size: 11px;
    white-space: nowrap;
}

.post-edit-media-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.post-edit-media-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #e5eee8;
}

.post-edit-media-item.is-cover { border-color: #0a8745; }
.post-edit-media-item img,
.post-edit-media-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.post-edit-media-item video { background: #09150e; }

.post-edit-media-label {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 4px 6px;
    border-radius: 9px;
    background: rgba(8, 29, 16, .78);
    color: #fff;
    font-size: 8.5px;
    font-weight: 850;
}

.post-edit-media-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(24, 25, 24, .78);
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.post-edit-media-order {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: flex;
    gap: 3px;
}

.post-edit-media-order button {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    color: #086f39;
    font-weight: 900;
}

.post-edit-media-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.post-edit-media-tools button,
.post-edit-preview-button,
.post-edit-cancel-button {
    min-height: 44px;
    border: 1px solid #cfe1d5;
    border-radius: 12px;
    background: #f5faf6;
    color: #176238;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.post-edit-media-limits {
    margin: 9px 0 0;
    color: #718078;
    font-size: 10.5px;
    text-align: center;
}

.post-edit-v5-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.post-edit-v5-fields label[hidden] { display: none !important; }
.post-edit-v5-wide { grid-column: 1 / -1; }
.post-edit-v5-preview > span {
    color: #087a3e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

#editPostPreviewCard { margin-top: 9px; }
.post-edit-preview-card-v5 {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #d9e8dd;
    border-radius: 15px;
    background: #fbfefc;
}
.post-edit-preview-card-v5 img,
.post-edit-preview-placeholder-v5 {
    width: 78px;
    height: 76px;
    border-radius: 11px;
    object-fit: cover;
    background: #e5f1e8;
}
.post-edit-preview-placeholder-v5 { display: grid; place-items: center; font-size: 25px; }
.post-edit-preview-card-v5 h4 { margin: 0 0 4px; color: #173a25; font-size: 13px; }
.post-edit-preview-card-v5 p { margin: 0; color: #65766b; font-size: 10.5px; }
.post-edit-preview-card-v5 strong { color: #087a3e; font-size: 14px; text-align: right; }

.post-edit-upload-progress {
    margin: 12px 0;
    padding: 13px;
    border-radius: 15px;
    background: #eaf7ee;
    color: #165d34;
}
.post-edit-upload-progress[hidden] { display: none !important; }
.post-edit-upload-progress > div { display: flex; justify-content: space-between; gap: 12px; }
.post-edit-upload-progress progress { width: 100%; height: 9px; margin: 8px 0 3px; accent-color: #07833f; }
.post-edit-upload-progress small { font-size: 10.5px; }

.post-edit-v5-actions {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom));
    z-index: 25;
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 8px;
    margin: 4px -14px calc(-18px - env(safe-area-inset-bottom));
    padding: 15px 14px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #dce8df;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
}
.post-edit-v5-actions .profile-action-submit { margin: 0 !important; }
.post-edit-cancel-button { grid-column: 1 / -1; min-height: 38px; background: transparent; border: 0; color: #68776d; }

@media (max-width: 720px) {
    .post-edit-dialog-v5 {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
    .post-edit-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .post-edit-v5-fields { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .my-post-card-v5 { grid-template-columns: 96px minmax(0, 1fr); gap: 11px; }
    .my-post-cover-v5,
    .my-post-cover-v5 img,
    .my-post-cover-empty-v5 { min-height: 132px; }
    .my-post-actions-v5 { grid-template-columns: 1fr 1fr; }
    .post-edit-media-tools { grid-template-columns: 1fr 1fr; }
    .post-edit-media-tools button:last-child { grid-column: 1 / -1; }
    .post-edit-preview-card-v5 { grid-template-columns: 66px minmax(0, 1fr); }
    .post-edit-preview-card-v5 img,
    .post-edit-preview-placeholder-v5 { width: 66px; height: 66px; }
    .post-edit-preview-card-v5 strong { grid-column: 2; text-align: left; }
}