/* ============================================================
   grilla.css — Vista de lotes disponibles
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --pril:   color-mix(in srgb, var(--pri) 12%, transparent);
    --border: #e2e8f0;
    --bg:     #f8fafc;
    --text:   #1e293b;
    --sub:    #64748b;
    --r:      8px;
    --sh:     0 1px 6px rgba(0,0,0,.07);
}

html, body { height: 100%; }

body {
    font-family: var(--fb);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    background: var(--pri);
    color: #fff;
    height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 300;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    flex-shrink: 0;
}

.tb-back {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 7px;
    transition: .15s;
}
.tb-back:hover { background: rgba(255,255,255,.18); color: #fff; }

.tb-sep  { opacity: .35; }
.tb-name { font-family: var(--fh); font-size: 16px; font-weight: 700; }

.tb-mz {
    background: rgba(255,255,255,.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.tb-moneda {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.tb-right {
    margin-left: auto;
    font-size: 12px;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tb-n { font-weight: 800; font-size: 15px; }

/* ── Page wrapper ─────────────────────────────────────────── */
.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 16px 30px;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Panel (fracciones / manzanas) ────────────────────────── */
.panel {
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 12px 14px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.panel-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sub);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mz-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.mz-tab {
    padding: 5px 14px;
    border-radius: 7px;
    border: 2px solid var(--border);
    background: #fff;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    text-decoration: none;
    transition: .15s;
    white-space: nowrap;
}
.mz-tab:hover  { border-color: var(--pri); color: var(--pri); background: var(--pril); }
.mz-tab.active { border-color: var(--pri); background: var(--pri); color: #fff; }
.mz-tab.all.active { border-color: #475569; background: #475569; }

.lote-count { font-size: 11px; font-weight: 400; opacity: .8; margin-left: 2px; }

/* ── Barra de filtros ─────────────────────────────────────── */
.filter-bar {
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-shrink: 0;
}

.fg { display: flex; flex-direction: column; gap: 4px; }

.fg label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}

.fg select,
.fg input {
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 6px 9px;
    font-family: var(--fb);
    font-size: 13px;
    color: var(--text);
    background: #fff;
    outline: none;
    height: 34px;
    transition: .15s;
}
.fg select:focus,
.fg input:focus  { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pril); }
.fg input        { width: 100px; }
.fg-fraccion     { min-width: 200px; }

.select-wrapper           { position: relative; }
.select-wrapper select    { width: 100%; padding-right: 28px; appearance: none; }
.select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 11px;
    pointer-events: none;
}

.btn-fil {
    height: 34px;
    padding: 0 16px;
    background: var(--pri);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .15s;
}
.btn-fil:hover { opacity: .86; }

.btn-clr {
    height: 34px;
    padding: 0 12px;
    background: var(--bg);
    color: var(--sub);
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: .15s;
}
.btn-clr:hover { border-color: #94a3b8; }

/* ── Toolbar conteo + búsqueda ────────────────────────────── */
.tbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.t-info           { font-size: 13px; color: var(--sub); }
.t-info strong    { color: var(--text); }

.t-search-wrap    { position: relative; }
.t-search {
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 6px 10px 6px 30px;
    font-family: var(--fb);
    font-size: 13px;
    outline: none;
    width: 200px;
    height: 34px;
    transition: .15s;
}
.t-search:focus   { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pril); }
.t-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.btn-exp {
    height: 34px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: .15s;
}
.btn-exp:hover { border-color: #16a34a; color: #16a34a; }

/* ── Tabla ────────────────────────────────────────────────── */
.tbl-wrap {
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    border: 1px solid var(--border);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tbl-scroll {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 60vh;
}
.tbl-scroll::-webkit-scrollbar       { width: 10px; height: 10px; }
.tbl-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--pri); border-radius: 10px; }
.tbl-scroll::-webkit-scrollbar-thumb:hover { opacity: .85; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead { position: sticky; top: 0; z-index: 20; }
thead tr { background: var(--pri); color: #fff; }

th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
th:hover           { background: rgba(255,255,255,.12); }
th .si             { margin-left: 4px; font-size: 9px; opacity: .6; }
th.asc  .si::before { content: '▲'; opacity: 1; }
th.desc .si::before { content: '▼'; opacity: 1; }
th:not(.asc):not(.desc) .si::before { content: '⇅'; }
th.nosort          { cursor: default; }
th.nosort:hover    { background: transparent; }

tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--pril); }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:nth-child(even):hover { background: var(--pril); }

td { padding: 10px 16px; vertical-align: middle; white-space: nowrap; }

td.ciudad   { color: var(--sub); font-size: 12px; }
td.fraccion { font-weight: 600; }
td.manzana span {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: var(--pril);
    color: var(--pri);
    padding: 2px 8px;
    border-radius: 20px;
}
td.lote  { font-family: var(--fh); font-weight: 700; font-size: 15px; }
td.sup   { color: var(--sub); }
td.cuota { font-weight: 700; color: var(--pri); }

.btn-row {
    background: var(--pri);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-row:hover { opacity: .84; }

.empty-r td { text-align: center; padding: 50px; color: var(--sub); }
.empty-r i  { font-size: 2.5rem; opacity: .2; display: block; margin-bottom: 10px; }

/* ── WhatsApp cell ────────────────────────────────────────── */
.wa-cell { text-align: center; vertical-align: middle; }
.wa-cell a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(37,211,102,.4);
    transition: transform .2s, box-shadow .2s, background .2s;
    position: relative;
}
.wa-cell a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37,211,102,.3);
    animation: wp-pulse 2.2s ease-out infinite;
}
.wa-cell a svg { position: relative; z-index: 1; }
.wa-cell a:hover {
    transform: scale(1.12);
    background: #128C7E;
    box-shadow: 0 4px 14px rgba(37,211,102,.55);
}

/* ── Modal detalle ────────────────────────────────────────── */
.modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-bg.open { display: flex; }

.modal-box {
    background: #fff;
    border-radius: 14px;
    max-width: 500px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.mh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.mh h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; }

.mcl {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sub);
    font-size: 15px;
    transition: .15s;
}
.mcl:hover { background: var(--border); }

.mb { padding: 18px; }

.mgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.mf { display: flex; flex-direction: column; gap: 2px; }
.mf label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
}
.mf span { font-size: 13px; font-weight: 600; color: var(--text); }
.msep    { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.mfoot   { padding: 12px 18px; border-top: 1px solid var(--border); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background: var(--pri);
    padding: 50px 28px 30px;
    color: #fff;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.site-footer h4 {
    color: #eff1f7;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
}
.site-footer p { color: #fff; font-size: 14px; line-height: 1.6; margin: 0; }
.site-footer p i { margin-right: 8px; color: var(--sec); }

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.social { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; }
.social a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: all .3s ease;
}
.social a:hover                  { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,.3); }
.social a.social-whatsapp:hover  { background: #25D366; }
.social a.social-instagram:hover { background: radial-gradient(circle at 30% 110%, #ffdb7e, #f9ce34, #e4405f, #833ab4, #3f729b); }
.social a.social-facebook:hover  { background: #1877F2; }
.social a.social-linkedin:hover  { background: #0A66C2; }
.social a.social-youtube:hover   { background: #FF0000; }
.social a.social-tiktok:hover    { background: #010101; }

/* ── WhatsApp flotante ────────────────────────────────────── */
.whatsapp-flotante {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37,211,102,.45);
    transition: transform .25s, box-shadow .25s;
    outline: none;
}
.whatsapp-flotante:hover  { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.6); }
.whatsapp-flotante:active { transform: scale(.96); }

.wp-tooltip {
    position: absolute;
    right: 68px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s, transform .2s;
}
.whatsapp-flotante:hover .wp-tooltip { opacity: 1; transform: translateX(0); }

.whatsapp-flotante::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37,211,102,.35);
    animation: wp-pulse 2.2s ease-out infinite;
}
@keyframes wp-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.55); opacity: 0;  }
    100% { transform: scale(1.55); opacity: 0;  }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    body { overflow: auto; }
    .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
    .page { overflow: visible; }
    .tbl-scroll { max-height: 50vh; }
    .footer-container { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .social { justify-content: center; }
    .site-footer { padding: 40px 20px 25px; }
}

@media (max-width: 600px) {
    .page { padding: 12px 10px 40px; }
    th, td { padding: 8px 10px; }
    .t-search { width: 150px; }
    .tbl-scroll { max-height: 45vh; }
}