/* ============================================================
   LARINMOBILIARIA · Design System — iOS (tema claro)
   Inspiración: Ajustes / App Store iOS + iPadOS
   Paleta: logo LAR (acero #4E7CA8 + marino #1B2A41) sobre grises iOS
   Iconos: SVG (helpers/icons.php). NUNCA emojis.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* marca (logo) */
    --brand:        #4E7CA8;
    --brand-strong: #3C648A;
    --brand-tint:   #EAF1F7;

    /* tinta (marino del logo) */
    --ink:    #1B2A41;
    --ink-2:  #3C4858;
    --ink-3:  #8A909C;

    /* superficies iOS */
    --bg:        #F2F2F7;
    --surface:   #FFFFFF;
    --surface-2: #FBFBFD;
    --separator: rgba(60, 67, 88, .14);
    --separator-strong: rgba(60, 67, 88, .22);
    --fill:      rgba(120, 120, 128, .12);
    --fill-2:    rgba(120, 120, 128, .08);

    /* semánticos iOS */
    --success: #34C759;
    --warning: #FF9F0A;
    --danger:  #FF3B30;
    --success-tint: #E7F8EC;
    --warning-tint: #FFF3E0;
    --danger-tint:  #FFEBEA;

    /* escalas */
    --r-row: 12px; --r-card: 16px; --r-sm: 8px; --r-full: 999px;
    --tap: 44px;
    --ease: cubic-bezier(.32, .72, 0, 1);   /* ease-out iOS */
    --dur: .22s;
    --shadow-card: 0 1px 3px rgba(20,30,55,.06), 0 8px 24px rgba(20,30,55,.05);
    --shadow-seg:  0 1px 3px rgba(20,30,55,.12);
    --sidebar-w: 264px;
    --maxw: 680px;

    /* z-scale */
    --z-nav: 50; --z-bar: 60; --z-modal: 100;

    --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.022em; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-tint), 0 0 0 2px var(--brand); border-radius: var(--r-sm); }

/* ============================================================
   APP SHELL: sidebar (desktop) + columna central + tab bar (mobile)
   ============================================================ */
.app { min-height: 100dvh; display: flex; }

/* ---- Sidebar iPadOS (desktop) ---- */
.sidebar {
    width: var(--sidebar-w); flex-shrink: 0; display: none; flex-direction: column;
    background: var(--surface-2); border-right: 1px solid var(--separator);
    padding: 22px 14px; position: sticky; top: 0; height: 100dvh;
}
.sidebar-logo { display: flex; align-items: center; justify-content: center; padding: 8px 8px 20px; margin-bottom: 6px; border-bottom: 1px solid var(--separator); }
.sidebar-logo img { height: 60px; width: auto; max-width: 100%; object-fit: contain; transition: height var(--dur) var(--ease); }
.side-link {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
    color: var(--ink-2); font-size: 15px; font-weight: 500; min-height: var(--tap);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-link .ic { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.side-link:hover { background: var(--fill-2); color: var(--ink); }
.side-link.active { background: var(--brand); color: #fff; font-weight: 600; }
.side-link.active .ic { color: #fff; }
.side-link.disabled { opacity: .4; pointer-events: none; }
.side-sep { height: 1px; background: var(--separator); margin: 10px 12px; }
.side-foot { margin-top: auto; }

/* ---- Columna principal ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 16px; }

/* ---- Nav bar / large title (iOS) ---- */
.navbar {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.navbar.solid { border-bottom-color: var(--separator); }
.navbar-row { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; }
.navbar-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.navbar-action { color: var(--brand); font-size: 17px; font-weight: 400; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 4px; }
/* La acción principal de la barra (Guardar) es un BOTÓN visible, no texto */
.navbar-action.strong {
    font-weight: 700; font-size: 15px; color: #fff; background: var(--brand);
    min-height: 38px; padding: 0 16px; border-radius: var(--r-full);
    box-shadow: 0 1px 2px rgba(27,42,65,.18);
}
.navbar-action.strong:active { transform: scale(.97); }
/* Botón de crear con etiqueta (antes era solo un "+" suelto) */
.navbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--brand); color: #fff; font-size: 15px; font-weight: 700;
    min-height: 38px; padding: 0 15px 0 11px; border-radius: var(--r-full);
    box-shadow: 0 1px 2px rgba(27,42,65,.18); white-space: nowrap;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.navbar-btn:hover { background: var(--brand-strong); }
.navbar-btn:active { transform: scale(.97); }
@media (max-width: 460px) { .hide-xs { display: none; } }
.navbar-icon { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--brand); background: none; border: none; cursor: pointer; border-radius: var(--r-full); transition: background var(--dur) var(--ease); }
.navbar-icon:hover { background: var(--fill); }

.large-title { font-size: 34px; font-weight: 700; letter-spacing: -.03em; padding: 8px 0 14px; }
.large-title .eyebrow { display: block; font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: -.01em; margin-bottom: 2px; }

/* ============================================================
   LISTAS AGRUPADAS (inset grouped) — base iOS
   ============================================================ */
.group { margin: 0 0 26px; }
.group-header { font-size: 13px; font-weight: 400; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; padding: 0 16px 7px; }
.sub-header { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 2px 16px 6px; }
.sub-header svg { color: var(--brand); opacity: .85; }
.list {
    background: var(--surface); border-radius: var(--r-card); overflow: hidden;
    box-shadow: var(--shadow-card);
}
.row {
    display: flex; align-items: center; gap: 12px; min-height: var(--tap);
    padding: 12px 16px; position: relative;
    transition: background var(--dur) var(--ease);
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator); }
a.row, button.row { width: 100%; text-align: left; background: var(--surface); border: none; cursor: pointer; color: inherit; font: inherit; }
a.row:active, button.row:active { background: var(--fill-2); }
.row-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.row-main { flex: 1; min-width: 0; overflow: hidden; }
.row-title { font-size: 17px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 13px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-trail { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 15px; flex-shrink: 0; }
.row-chevron { color: var(--separator-strong); flex-shrink: 0; }
.pill-sm { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-sm .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pill-sm.neutral  { background: var(--fill); color: var(--ink-2); }
.pill-sm.neutral .dot  { background: var(--ink-3); }
.pill-sm.completed { background: var(--success-tint); color: #1E7A36; }
.pill-sm.completed .dot { background: var(--success); }
@media (max-width: 767px) {
    .pill-sm .pill-txt { display: none; }
    .pill-sm { padding: 0; background: none !important; width: 9px; height: 9px; }
    .pill-sm .dot { width: 9px; height: 9px; }
}
.row-value { color: var(--ink-3); font-size: 17px; }

/* ============================================================
   DASHBOARD: grid de módulos (tiles iOS)
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.tile {
    background: var(--surface); border-radius: var(--r-card); padding: 14px;
    box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px;
    color: inherit; transition: transform var(--dur) var(--ease);
}
.tile:active { transform: scale(.97); }
.tile.disabled { opacity: .5; pointer-events: none; }
.tile-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.tile-icon .ic { width: 18px; height: 18px; }
.tile-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.tile-desc { font-size: 13px; color: var(--ink-3); flex: 1; }
.tile-foot { display: flex; align-items: baseline; gap: 5px; }
.tile-foot .n { font-size: 22px; font-weight: 700; color: var(--ink); }
.tile-foot .l { font-size: 12px; color: var(--ink-3); }

/* Home — centrar tiles en desktop */
.home-scroll { display: flex; flex-direction: column; justify-content: center; }
.home-scroll > .wrap { margin-top: auto; margin-bottom: auto; }

/* Tile refinements */
.tile-top { display: flex; align-items: center; justify-content: space-between; }
.tile-badge {
    font-size: 13px; font-weight: 700; color: var(--ink);
    background: var(--fill); border-radius: var(--r-full);
    min-width: 22px; text-align: center; padding: 2px 8px;
    font-variant-numeric: tabular-nums; line-height: 1.3;
}
.tile-body { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.tile-sub { font-size: 12px; color: var(--ink-3); }

/* stat strip (summary) */
.stat-strip { display: flex; gap: 10px; margin-bottom: 22px; }
.stat { flex: 1; background: var(--surface); border-radius: var(--r-card); padding: 14px 12px; box-shadow: var(--shadow-card); text-align: center; }
.stat .n { font-size: 26px; font-weight: 700; color: var(--ink); }
.stat .l { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* ============================================================
   CONTROLES
   ============================================================ */
/* Jerarquía clara para usuarios no técnicos:
   .btn (primario, azul sólido: LA acción) · .btn.light (secundario, blanco con
   borde: Cancelar/Volver) · .btn.tinted (apoyo, azul claro) · rojos = peligro. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    padding: 13px 22px; border-radius: var(--r-row); font-size: 17px; font-weight: 700;
    font-family: inherit; min-height: 48px; line-height: 1;
    box-shadow: 0 1px 2px rgba(27,42,65,.18), 0 3px 10px rgba(27,42,65,.10);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-strong); }
.btn:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(27,42,65,.16); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
.btn.block { width: 100%; }
.btn.light {
    background: var(--surface); color: var(--ink); font-weight: 600;
    border: 1.5px solid var(--separator-strong); box-shadow: none;
}
.btn.light:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.tinted { background: var(--brand-tint); color: var(--brand-strong); box-shadow: none; }
.btn.tinted:hover { background: #DCE7F1; }
.btn.tinted.danger { background: var(--danger-tint, #FFE5E3); color: var(--danger); }
.btn.tinted.danger:hover { background: #FFD9D6; }
.btn.plain { background: none; color: var(--brand); min-height: var(--tap); box-shadow: none; }
.btn .ic { width: 19px; height: 19px; }

/* Estado "guardando…" (lo activa app.js al enviar un formulario) */
.btn.saving { pointer-events: none; opacity: .8; }
.btn .spin {
    width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
    border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: btnspin .7s linear infinite;
}
.btn.light .spin, .btn.tinted .spin { border-color: rgba(60,72,88,.25); border-top-color: var(--ink-2); }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* chips / pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill.pending { background: var(--warning-tint); color: #B26A00; }
.pill.pending .dot { background: var(--warning); }
.pill.completed { background: var(--success-tint); color: #1E7A36; }
.pill.completed .dot { background: var(--success); }
.chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--fill); color: var(--ink-2); }

/* segmented control (iOS) */
.segmented { display: inline-flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; width: 100%; }
.segmented a { flex: 1; text-align: center; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background var(--dur) var(--ease); }
.segmented a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-seg); }

/* progreso */
.bar { height: 6px; background: var(--fill); border-radius: var(--r-full); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width .3s var(--ease); }

/* ============================================================
   FORMULARIOS (inset grouped form)
   ============================================================ */
.form-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 7px 16px; position: relative; }
.form-row + .form-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator); }
.form-row label { font-size: 17px; color: var(--ink); flex-shrink: 0; min-width: 96px; }
.form-row .control { flex: 1; }
.form-stack { padding: 10px 16px; }
.form-stack + .form-stack::before { content: ""; }
.field-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin: 0 0 6px; }
input, select, textarea {
    width: 100%; font-family: inherit; font-size: 17px; color: var(--ink);
    background: transparent; border: none; padding: 8px 0; min-height: 36px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; }
select { -webkit-appearance: none; appearance: none; background-image: none; cursor: pointer; }
.req { color: var(--danger); }

/* control de geolocalización (mapa + buscador) */
.geo { padding: 6px 0; position: relative; }
.geo-search { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.geo-q-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--fill-2); border: 1px solid var(--separator); border-radius: var(--r-row); padding: 0 12px; min-height: 46px; }
.geo-q-wrap .ic { color: var(--ink-3); flex-shrink: 0; }
.geo-q { flex: 1; background: transparent; border: none; min-height: 44px; font-size: 16px; }
.geo-btn-buscar { white-space: nowrap; min-height: 46px; }
.geo-results { border: 1px solid var(--separator); border-radius: var(--r-row); overflow: hidden auto; margin-bottom: 10px; background: var(--surface); max-height: 220px; box-shadow: var(--shadow-card); }
.geo-item { padding: 11px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--separator); line-height: 1.35; }
.geo-item:last-child { border-bottom: none; }
.geo-item:hover { background: var(--brand-tint); }
.geo-item.muted { color: var(--ink-3); cursor: default; }
.geo-map { position: relative; height: 260px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--separator); z-index: 0; }
.geo-map .leaflet-control-attribution { font-size: 10px; }
.geo-loc { position: absolute; right: 12px; bottom: 12px; z-index: 500; width: 42px; height: 42px; border-radius: var(--r-full); border: none; cursor: pointer; background: var(--surface); color: var(--brand); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(20,30,55,.25); }
.geo-loc:hover { background: var(--brand); color: #fff; }
.geo-val { font-size: 14px; color: var(--ink-2); margin-top: 10px; line-height: 1.4; }
.geo-val a { color: var(--brand); }

/* inputs en login (boxed, fuera de lista agrupada) */
.input-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-row); padding: 0 14px; min-height: 50px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.input-box .ic { color: var(--ink-3); }
.input-box input { padding: 0; min-height: 48px; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.check-row input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--brand); }

/* alertas */
.alert { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: var(--r-row); font-size: 15px; margin-bottom: 16px; }
.alert.err { background: var(--danger-tint); color: #C12B22; }
.alert.ok { background: var(--success-tint); color: #1E7A36; }

/* estado vacío */
.empty { text-align: center; padding: 56px 24px; }
.empty .em-ic { width: 66px; height: 66px; border-radius: var(--r-full); background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; margin: 0 auto 16px; }
.empty h4 { font-size: 19px; margin-bottom: 6px; }
.empty p { color: var(--ink-3); font-size: 15px; margin-bottom: 22px; }

/* ============================================================
   TAB BAR (mobile)
   ============================================================ */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separator);
    display: flex; justify-content: space-around;
    padding-bottom: var(--safe-b);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.tab .ic { width: 26px; height: 26px; }
.tab span { font-size: 10px; font-weight: 500; }
.tab.active { color: var(--brand); }
.tab-more { background: none; border: none; cursor: pointer; font: inherit; }
.has-tabbar { padding-bottom: calc(64px + var(--safe-b)); }

/* Hoja "Más" (overflow del tabbar en mobile) */
.tabmore-ov { position: fixed; inset: 0; z-index: 1400; background: rgba(15,27,45,.45); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.tabmore-ov.open { opacity: 1; visibility: visible; }
.tabmore { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401; background: var(--surface, #fff); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(15,27,45,.18); padding: 8px 16px calc(18px + var(--safe-b)); transform: translateY(110%); transition: transform .26s cubic-bezier(.22,1,.36,1); }
.tabmore.open { transform: translateY(0); }
.tabmore-grab { width: 40px; height: 5px; border-radius: 999px; background: var(--separator); margin: 6px auto 10px; }
.tabmore-head { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px 10px; }
.tabmore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tabmore-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; color: var(--ink-2); text-align: center; min-height: 76px; justify-content: center; }
.tabmore-item:active { background: var(--fill, #EEF0F3); }
.tabmore-item.active { background: var(--brand-tint); color: var(--brand-strong); }
.tabmore-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--brand); }
.tabmore-item.active .tabmore-ic { color: var(--brand-strong); }
.tabmore-lb { font-size: 11px; font-weight: 500; line-height: 1.2; }
.tabmore-logout .tabmore-ic { color: var(--ink-3); }
@media (min-width: 1024px) { .tabmore, .tabmore-ov { display: none; } }

/* ---- Chip de usuario en barra superior (solo ≥1024) ---- */
.navbar-right { display: flex; align-items: center; gap: 8px; }
.user-chip { display: none; align-items: center; gap: 10px; padding: 5px 5px 5px 12px; border-radius: var(--r-full); }
.user-chip .uc-info { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.user-chip .uc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-chip .uc-role { font-size: 11.5px; color: var(--ink-3); }
.user-chip .uc-avatar { width: 34px; height: 34px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }

/* ---- Pie de cuenta en el sidebar ---- */
.side-account { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--separator); margin-top: 8px; }
.side-avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.side-account-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.side-account-info .nm { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account-info .rl { font-size: 12px; color: var(--ink-3); }
.side-logout { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.side-logout:hover { background: var(--fill); color: var(--danger); }

/* Hamburguesa y status-pill: ocultos en mobile (se muestran en desktop) */
.hamburger { display: none; }
.navbar .status-pill { display: none; }

/* Barra de acciones del formulario — en mobile queda PEGADA arriba del tab bar,
   así "Guardar" siempre está a la vista sin recorrer todo el formulario. */
.form-actions { margin-bottom: 24px; }
.form-cancel { display: none; }
.form-save { width: 100%; }
@media (max-width: 1023px) {
    .form-actions {
        position: sticky; bottom: calc(64px + var(--safe-b)); z-index: 6;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        padding: 10px 6px; margin: 8px -6px 24px; border-radius: 16px;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile */
@media (max-width: 767px) {
    .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tile { padding: 12px; gap: 6px; }
    .tile-icon { width: 30px; height: 30px; border-radius: 8px; }
    .tile-icon .ic { width: 16px; height: 16px; }
    .tile-title { font-size: 13px; }
    .tile-badge { font-size: 12px; padding: 1px 6px; }
    .large-title { font-size: 28px; padding: 4px 0 10px; }

    .row-title { font-size: 15px; }
    .row-trail .pill { font-size: 11px; padding: 2px 7px; }
    .row-trail .pill .dot { width: 6px; height: 6px; }
    .row-trail { gap: 4px; }
    .pill { font-size: 12px; padding: 3px 8px; }
}

/* Tablet: tab bar, contenido centrado cómodo */
@media (min-width: 768px) {
    .wrap, .navbar-row, .large-title { max-width: var(--content-max, 720px); margin-left: auto; margin-right: auto; }
    .content { padding: 4px 24px; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .stat-strip { gap: 14px; }
}

/* Desktop: sidebar, toolbar, hamburguesa, formularios en 2 columnas */
@media (min-width: 1024px) {
    .sidebar { display: flex; }
    .tabbar { display: none; }
    .has-tabbar { padding-bottom: 40px; }
    .navbar { position: sticky; border-bottom: 1px solid var(--separator); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .navbar-row { min-height: 60px; }
    .content { padding: 6px 32px 40px; }
    .large-title { padding-top: 18px; }
    .tiles { grid-template-columns: repeat(4, 1fr); }

    /* El chip de usuario del header se quita: ya está en el sidebar (con logout) */
    .user-chip { display: none; }

    /* Hamburguesa: posicionada en el extremo izquierdo de la barra (no altera la fila) */
    .navbar { position: sticky; }
    .hamburger { display: grid; place-items: center; width: 40px; height: 40px; border: none; cursor: pointer;
        background: none; color: var(--ink-2); border-radius: 10px; transition: background var(--dur) var(--ease);
        position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 3; }
    .hamburger:hover { background: var(--fill); color: var(--ink); }

    /* Status pill en la barra superior (no empuja el contenido) */
    .navbar .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; }
    .status-pill.ok { background: var(--success-tint); color: #1E7A36; }
    .status-pill.pend { background: var(--warning-tint); color: #B26A00; }
    .status-pill .ic { width: 15px; height: 15px; }

    /* La alerta dentro del formulario se oculta en desktop (se ve en el pill) */
    .form-alert { display: none; }

    /* Acciones del formulario: barra inferior fija estilo PC (Cancelar + Guardar a la derecha) */
    .navbar .navbar-action.strong { display: none; }  /* se quita el "Guardar" de arriba */
    .form-actions {
        position: sticky; bottom: 0; z-index: 6; display: flex; justify-content: flex-end; gap: 10px;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border-top: 1px solid var(--separator); padding: 14px 0; margin: 14px 0 0;
    }
    .form-actions .form-cancel { display: inline-flex; width: auto; }
    .form-actions .form-save { width: auto; padding-left: 28px; padding-right: 28px; }

    /* Sidebar colapsable (rail de iconos) */
    .app.collapsed .sidebar { width: 78px; padding-left: 10px; padding-right: 10px; }
    .app.collapsed .sidebar .side-link { justify-content: center; padding: 9px; gap: 0; }
    .app.collapsed .sidebar .side-link span,
    .app.collapsed .sidebar .side-account-info { display: none; }
    .app.collapsed .sidebar .side-account { justify-content: center; gap: 0; }
    .app.collapsed .sidebar-logo img { height: 34px; }
    .app.collapsed .side-logout { display: none; }

    /* Formularios en 2 columnas (aprovechar el ancho) */
    .list-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .list-grid > .form-stack, .list-grid > .check-row, .list-grid > .row {
        border-top: 1px solid var(--separator) !important; border-right: 1px solid var(--separator);
    }
    .list-grid > .form-stack:nth-child(2n), .list-grid > .check-row:nth-child(2n), .list-grid > .row:nth-child(2n) { border-right: none; }
    /* Campos que ocupan toda la fila (mapa de geolocalización, casillas) */
    .list-grid > .form-stack:has(.geo), .list-grid > .check-row { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
    .large-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .tile:active, .btn:active { transform: none; }
}

/* ============================================================
   NEGOCIACIÓN — stepper de fases, pills de estado, tarjeta de fase
   ============================================================ */

/* segmented con scroll horizontal (cuando hay muchos filtros) */
.segmented.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.segmented.scroll-x::-webkit-scrollbar { display: none; }
.segmented.scroll-x a { flex: 0 0 auto; white-space: nowrap; }

/* variantes de pill para negociación */
.pill.neutral  { background: var(--fill);       color: var(--ink-2); }
.pill.neutral .dot  { background: var(--ink-3); }
.pill.progress { background: var(--brand-tint);  color: var(--brand-strong); }
.pill.progress .dot { background: var(--brand); }

/* mini-pasos (puntos) en las filas de la lista */
.mini-steps { display: inline-flex; gap: 5px; margin-top: 8px; }
.ms-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--separator-strong); }
.ms-dot.done { background: var(--brand); }
.ms-dot.cur  { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* stepper horizontal */
.stepper { display: flex; gap: 6px; margin: 6px 0 28px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; }
.step::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 19px); right: calc(50% + 19px); height: 2px; background: var(--separator); }
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--brand); }
.step-node {
    width: 38px; height: 38px; border-radius: var(--r-full); display: grid; place-items: center;
    background: var(--fill); color: var(--ink-3); border: 2px solid transparent;
    flex-shrink: 0; position: relative; z-index: 1; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step.done .step-node { background: var(--brand); color: #fff; }
.step.current .step-node { background: var(--surface); color: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.step-text { display: flex; flex-direction: column; line-height: 1.2; }
.step-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.step.pending .step-label { color: var(--ink-3); }
.step-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* tarjeta de la fase actual */
.phase-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px; margin-bottom: 26px; }
.phase-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.phase-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.phase-title { font-size: 17px; font-weight: 700; }
.phase-sub { font-size: 13px; color: var(--ink-3); }
.phase-head .chip { margin-left: auto; flex-shrink: 0; }
.phase-desc { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.5; }
.phase-actions { display: flex; align-items: center; gap: 12px; }

/* datos de prospección que alimentan la calculadora */
.origen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.origen-item { background: var(--surface-2); border: 1px solid var(--separator); border-radius: var(--r-row); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.oi-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.oi-value { font-size: 17px; font-weight: 600; color: var(--ink); }

@media (min-width: 768px) {
    .origen-grid { grid-template-columns: repeat(4, 1fr); }
}

/* buscador de viviendas (live, onkeyup) — estilo iOS, fondo blanco como las tarjetas */
.searchbar {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--separator); border-radius: 12px;
    padding: 0 14px; min-height: 46px; margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.searchbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.searchbar .ic { color: var(--ink-3); flex-shrink: 0; }
.searchbar input { background: transparent; border: none; min-height: 44px; font-size: 16px; color: var(--ink); }
/* el wrapper ya muestra el foco: evitar el segundo anillo del :focus-visible global */
.searchbar input:focus, .searchbar input:focus-visible { outline: none; box-shadow: none; }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Inputs que viven dentro de una caja con foco propio: que NO dupliquen el anillo global */
.input-box input:focus-visible,
.calc-money input:focus-visible,
.geo-q-wrap input:focus-visible { outline: none; box-shadow: none; }

/* pasos navegables del stepper */
a.step { color: inherit; }
.step.viewing .step-label { color: var(--brand); }

/* ============================================================
   CALCULADORA (Estimación 1 / Propuesta)
   ============================================================ */
.calc-list { padding: 0; }
.calc-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; position: relative; }
.calc-row + .calc-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--separator); }
.cr-label { flex: 1; min-width: 0; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.cr-n { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--fill); color: var(--ink-3); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cr-tag { font-size: 11px; color: var(--brand-strong); background: var(--brand-tint); padding: 2px 7px; border-radius: var(--r-full); font-weight: 600; white-space: nowrap; }

.calc-money { display: flex; align-items: center; gap: 3px; background: var(--fill-2); border: 1px solid var(--separator); border-radius: 10px; padding: 0 12px; min-height: 40px; width: 158px; flex-shrink: 0; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.calc-money:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.calc-money .cur { color: var(--ink-3); font-weight: 600; flex-shrink: 0; }
.calc-money input { text-align: right; padding: 0; min-height: 38px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.calc-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; font-size: 12.5px; color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--separator); }
.calc-note .chip { background: var(--warning-tint); color: #B26A00; }

.calc-summary { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 4px 16px; margin: 0 0 26px; }
.cs-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.cs-item + .cs-item { border-top: 1px solid var(--separator); }
.cs-label { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.cs-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.calc-result { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 24px; }
.cr-bruta { background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.crb-label { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.crb-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-estimada { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; }
.cre-label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.cr-estimada .cr-n { background: rgba(255,255,255,.18); color: #fff; }
.cre-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crb-value.neg, .cre-value.neg { color: var(--danger); }

/* ============================================================
   CALCULADORA EN TABLA (Propuesta + Proyecciones)
   ============================================================ */
.calc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.calc-toolbar .ct-title { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.calc-toolbar .btn { padding: 9px 14px; min-height: 38px; font-size: 14px; }
.calc-toolbar .btn:disabled { opacity: .4; }

.calc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--surface); margin-bottom: 12px; }
.calc-table { width: 100%; border-collapse: collapse; }
.calc-table th, .calc-table td { padding: 8px 12px; border-bottom: 1px solid var(--separator); white-space: nowrap; text-align: right; }
.calc-table thead th { background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.calc-table .rh { text-align: left; position: sticky; left: 0; background: var(--surface); font-weight: 500; color: var(--ink-2); font-size: 14.5px; min-width: 156px; }
.calc-table thead .rh { background: var(--ink); color: #fff; z-index: 2; }
.calc-table tbody tr:last-child td, .calc-table tbody tr:last-child .rh { border-bottom: none; }
.rh .rh-tag { font-size: 10.5px; font-weight: 600; color: var(--brand); margin-left: 6px; vertical-align: middle; }

.ci { width: 116px; text-align: right; background: var(--fill-2); border: 1px solid var(--separator); border-radius: 8px; padding: 7px 9px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ci:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.calc-out { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-out.neg { color: var(--danger); }

tr.r-calc .rh, tr.r-calc td { background: var(--surface-2); font-weight: 600; }
tr.r-total .rh, tr.r-total td { background: var(--brand-tint); color: var(--ink); font-weight: 700; }
tr.r-result .rh, tr.r-result td { background: var(--brand); color: #fff; font-weight: 700; }
tr.r-result .rh { color: #fff; }
tr.r-result .calc-out.neg { color: #FFD7D3; }

.cc2, .cc3 { display: none; }
.calc-table.show2 .cc2, .calc-table.show3 .cc3 { display: table-cell; }
.proy-head { display: inline-flex; align-items: center; gap: 4px; }
.proy-x { background: rgba(255,255,255,.22); border: none; color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: inline-grid; place-items: center; }
.proy-x:hover { background: rgba(255,255,255,.4); }
.calc-note2 { font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; padding: 0 4px; }

/* ============================================================
   ADJUNTO con pegar (Ctrl+V) / arrastrar / elegir + vista previa
   ============================================================ */
.filedrop { position: relative; }
.filedrop .fd-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fd-zone { display: flex; align-items: center; gap: 9px; padding: 14px; border: 1.5px dashed var(--separator-strong); border-radius: var(--r-row); background: var(--fill-2); color: var(--ink-3); font-size: 14px; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fd-zone:hover { border-color: var(--brand); color: var(--ink-2); }
.fd-zone .ic { color: var(--ink-3); flex-shrink: 0; }
.fd-zone .fd-kbd { font-size: 12px; background: var(--fill); border: 1px solid var(--separator); border-radius: 5px; padding: 1px 6px; font-weight: 600; color: var(--ink-2); }
.filedrop:focus-within .fd-zone { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.filedrop.drag .fd-zone { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); }
.fd-preview { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.fd-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--separator); }
.fd-name { font-size: 13px; color: var(--ink-2); word-break: break-all; }
.fd-clear { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.fd-clear:hover { background: var(--danger-tint); }
.recab-file { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; }

/* ============================================================
   LISTAS EN ESCRITORIO (≥1024): ancho amplio + densas tipo tabla.
   Solo afecta desktop; la vista móvil queda intacta.
   ============================================================ */
@media (min-width: 1024px) {
    .main.list-wide .wrap,
    .main.list-wide .navbar-row { max-width: 1500px; }
    .main.list-wide .wrap { padding: 16px 28px 0; }

    /* el título grande duplica al de la barra en desktop → ocultarlo (en móvil se conserva el large-title iOS) */
    .main.list-wide .large-title { display: none; }
    /* separar el título de la barra de la hamburguesa (posicionada a la izquierda) */
    .main.list-wide .navbar-title { padding-left: 48px; }

    /* filas compactas, a todo el ancho, con hover de tabla */
    .main.list-wide .list .row { padding-top: 8px; padding-bottom: 8px; }
    .main.list-wide .list .row:hover { background: var(--surface-2); }
    /* separadores a ras (sin el inset de 16px) para look de tabla */
    .main.list-wide .list .row + .row::before { left: 0; }
    /* el avance de prospección en línea, no en otra fila, para ahorrar alto */
    .main.list-wide .row-main > span[style*="margin-top"] { margin-top: 3px !important; }
}

/* ============================================================
   FORMULARIO DE CAPTURA (prospección) — campos "boxed" legibles.
   Scope .cap-form: NO afecta a otros formularios (verificación, login,
   configuración…). Cada campo es una caja blanca sobre el fondo gris →
   se distingue qué es capturable; los huecos de la cuadrícula leen como
   espacio, no como campos rotos.
   ============================================================ */

/* Sección: encabezado + cuadrícula de campos */
.cap-form .fsec { margin: 0 0 24px; animation: fcap-in .28s var(--ease) both; }
.cap-form .fsec-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 13px; font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .03em; padding: 0 2px 11px; margin: 0;
}
.cap-form .fsec-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-form .fsec-prog { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.cap-form .fsec-prog.done { color: #1E7A36; }

.cap-form .fgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* Campo */
.cap-form .ffield { min-width: 0; display: flex; flex-direction: column; }
.cap-form .flabel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 7px; }
.cap-form .flabel .req { color: var(--danger); font-weight: 700; }

/* Control en caja (mismo patrón que .input-box / .searchbar) */
.cap-form .fc {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--separator-strong); border-radius: var(--r-row);
    padding: 0 14px; min-height: 50px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cap-form .fc:hover { border-color: var(--ink-3); }
.cap-form .fc:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.cap-form .fc input, .cap-form .fc select {
    flex: 1; min-width: 0; background: transparent; border: none;
    font-size: 16px; color: var(--ink); padding: 13px 0; min-height: 0;
}
.cap-form .fc select { cursor: pointer; }
/* el wrapper ya muestra el foco: evitar el segundo anillo del :focus-visible global */
.cap-form .fc input:focus-visible, .cap-form .fc select:focus-visible { outline: none; box-shadow: none; }

/* sin spinners en los números */
.cap-form .fc input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.cap-form .fc input[type=number]::-webkit-outer-spin-button,
.cap-form .fc input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* dinero: prefijo $ + número a la derecha con cifras tabulares */
.cap-form .fc.money .fc-pre { color: var(--ink-3); font-size: 16px; font-weight: 600; flex-shrink: 0; }
.cap-form .fc.money input { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* select: flecha propia (appearance:none global la quita) */
.cap-form .fc.sel .chev { color: var(--ink-3); flex-shrink: 0; pointer-events: none; display: inline-flex; }

/* archivo */
.cap-form .fc.fc-file { padding-top: 9px; padding-bottom: 9px; }
.cap-form .fc.fc-file input { font-size: 14px; color: var(--ink-2); }

/* Campos a fila completa (dirección, casilla, geolocalización, archivo) */
.cap-form .ffield--wide, .cap-form .ftoggle, .cap-form .ffield--geo { grid-column: 1 / -1; }

/* Toggle (checkbox) como fila propia */
.cap-form .ftoggle {
    display: flex; align-items: center; gap: 13px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--separator-strong); border-radius: var(--r-row);
    padding: 0 16px; min-height: 54px;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cap-form .ftoggle:hover { border-color: var(--ink-3); }
.cap-form .ftoggle input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--brand); flex-shrink: 0; }
.cap-form .ftoggle span { font-size: 16px; font-weight: 500; color: var(--ink); }

/* Estado: obligatorio aún sin llenar (cue gentil, no alarmante) */
.cap-form .ffield.falta .fc { border-color: color-mix(in srgb, var(--warning) 65%, transparent); background: color-mix(in srgb, var(--warning-tint) 50%, var(--surface)); }
.cap-form .fhint { display: none; align-items: center; gap: 5px; font-size: 12px; color: #B26A00; margin: 7px 2px 0; }
.cap-form .fhint .ic { color: var(--warning); flex-shrink: 0; }
.cap-form .ffield.falta > .fhint { display: flex; }

/* Nota (sin tipo elegido / tipo sin campos) */
.cap-form .fnote {
    text-align: center; color: var(--ink-3); font-size: 14.5px; line-height: 1.5;
    padding: 30px 22px; border: 1.5px dashed var(--separator-strong); border-radius: var(--r-card);
    background: var(--surface-2);
}

/* Campo en solo lectura (espejo del dato lineal, módulos no editables) */
.cap-form .ffield.ro .flabel { color: var(--ink-3); }
.cap-form .ro-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--fill); padding: 2px 7px; border-radius: var(--r-full); }
.cap-form .ro-val { display: flex; align-items: center; min-height: 50px; padding: 11px 14px; border: 1px solid var(--separator); border-radius: var(--r-row); background: var(--surface-2); color: var(--ink-2); font-size: 16px; font-variant-numeric: tabular-nums; word-break: break-word; }
.cap-form .ro-val a { color: var(--brand); }

/* Columnas explícitas (column break). Apilan en móvil; en ≥768 usan --fcols columnas. */
.cap-form .fcols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cap-form .fcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 768px) {
    .cap-form .fcols { grid-template-columns: repeat(var(--fcols, 2), minmax(0, 1fr)); gap: 15px 18px; }
}

/* Campo TABLA (filas repetibles) */
.cap-form template { display: none; }
.cap-form .ftable { border: 1px solid var(--separator-strong); border-radius: var(--r-row); background: var(--surface); overflow: hidden; }
.cap-form .ftable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cap-form .ftable-grid { width: 100%; border-collapse: collapse; }
.cap-form .ftable-grid th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--separator); white-space: nowrap; }
.cap-form .ftable-grid td { padding: 6px 8px; border-bottom: 1px solid var(--separator); vertical-align: middle; }
.cap-form .ftable-body tr:last-child td { border-bottom: none; }
.cap-form .ftable-grid input, .cap-form .ftable-grid select {
    width: 100%; min-width: 130px; background: var(--fill-2); border: 1px solid transparent; border-radius: 8px;
    padding: 9px 10px; font-size: 15px; color: var(--ink); min-height: 40px;
}
.cap-form .ftable-grid input:focus, .cap-form .ftable-grid select:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-tint); }
.cap-form .ftable-grid input:focus-visible, .cap-form .ftable-grid select:focus-visible { box-shadow: 0 0 0 3px var(--brand-tint); }
.cap-form .ftable-grid input[type=number] { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.cap-form .ftable-grid input[type=number]::-webkit-outer-spin-button, .cap-form .ftable-grid input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-form .ftable-x { width: 46px; text-align: center; }
.cap-form .ftr-del { background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 8px; border-radius: 8px; display: inline-grid; place-items: center; }
.cap-form .ftr-del:hover { color: var(--danger); background: var(--danger-tint); }
.cap-form .ftable-add { display: inline-flex; align-items: center; gap: 6px; margin: 10px; background: var(--brand-tint); color: var(--brand-strong); border: none; border-radius: var(--r-row); padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; font-family: inherit; transition: background var(--dur) var(--ease); }
.cap-form .ftable-add:hover { background: #DCE7F1; }
.cap-form .ftable-add .ic { width: 16px; height: 16px; }
.cap-form .ftable-ro td { color: var(--ink-2); font-size: 15px; padding: 9px 12px; }
.cap-form .ftable-empty { color: var(--ink-3); text-align: center; font-size: 14px; padding: 14px; }

@keyframes fcap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tablet/escritorio: dos columnas */
@media (min-width: 768px) {
    .cap-form .fgrid { grid-template-columns: 1fr 1fr; gap: 15px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .cap-form .fsec { animation: none; }
}

/* ============================================================
   VERIFICACIÓN — formulario CENTRADO + dock de impresión a la izquierda
   El dock no descentra el formulario: grilla [1fr · formulario · 1fr], el
   dock vive en la columna izquierda y queda sticky al hacer scroll.
   ============================================================ */
.verif-stage { padding: 0 16px; }
.verif-form { min-width: 0; }
.formatos-dock { margin-top: 18px; }
.formatos-dock .list { margin-bottom: 20px; }

@media (min-width: 1180px) {
    .verif-stage {
        display: grid;
        grid-template-columns: 1fr minmax(0, var(--content-max, 840px)) 1fr;
        align-items: start; gap: 0; padding: 0;
    }
    .verif-form { grid-column: 2; grid-row: 1; padding: 0 16px; }
    .formatos-dock {
        grid-column: 1; grid-row: 1; justify-self: end;
        width: 100%; max-width: 256px; margin-top: 0;
        padding: 0 18px 0 16px;
        position: sticky; top: 70px;
        max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain;
    }
    /* Dock compacto: tarjetas verticales (icono+título arriba, CTA abajo) */
    .formatos-dock .group-header { padding: 0 4px 8px; }
    .formatos-dock .list { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
    .formatos-dock .row {
        display: grid; grid-template-columns: auto 1fr; gap: 7px 9px;
        background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 11px 12px;
    }
    .formatos-dock .row + .row::before { display: none; }
    .formatos-dock .row-icon { grid-row: 1; }
    .formatos-dock .row-main { grid-row: 1; grid-column: 2; }
    .formatos-dock .row-title {
        white-space: normal; line-height: 1.25; font-size: 15px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .formatos-dock .row-sub:not([style]) { display: none; }   /* oculta solo la descripción; conserva el aviso de requisitos */
    .formatos-dock .row-trail { grid-column: 1 / -1; }
    .formatos-dock .row-trail .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   VERIFICACIÓN — dock de ACCIONES a la DERECHA (espejo del de Documentos)
   Solo en PC (≥1180px): las acciones del formulario (Guardar / Cancelar) salen
   de la barra inferior y se fijan en la columna derecha, lista para más funciones.
   En <1180px se oculta: las acciones siguen en la barra inferior del formulario.
   ============================================================ */
.acciones-dock { display: none; }

@media (min-width: 1180px) {
    /* En PC las acciones viven en el rail derecho, no en la barra inferior pegajosa */
    .verif-stage .form-actions,
    .verif-stage .phase-actions { display: none; }

    .acciones-dock {
        display: block;
        grid-column: 3; grid-row: 1; justify-self: start;
        width: 100%; max-width: 256px; margin-top: 0;
        padding: 0 18px 0 16px;
        position: sticky; top: 70px;
        max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain;
    }
    .acciones-dock .group-header { padding: 0 4px 8px; }
    .acciones-card {
        background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card);
        padding: 14px; display: flex; flex-direction: column; gap: 10px;
    }
    .acciones-card .btn { width: 100%; justify-content: center; }
}

/* Separador y nota dentro del dock de Acciones (procesos paralelos) */
.acc-sep { height: 1px; background: var(--separator); margin: 4px 0; }
.acc-note {
    display: flex; gap: 7px; align-items: flex-start;
    font-size: 13px; line-height: 1.35; color: var(--ink-2);
}
.acc-note svg { flex-shrink: 0; margin-top: 1px; }
.acc-note.ok { color: var(--success); }
.rev-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: #B26A00; background: var(--warning-tint); padding: 10px 12px; border-radius: 10px; }
.rev-warn svg { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   HABILITACIÓN — resumen + lienzo del plano
   ============================================================ */
.hab-summary {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px;
}
.hab-stat {
    flex: 1; min-width: 120px; background: var(--surface); border-radius: 14px;
    box-shadow: var(--shadow-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.hab-stat .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em; }
.hab-stat .n { font-size: 20px; font-weight: 700; color: var(--ink); }
.hab-stat.brand { background: var(--brand); }
.hab-stat.brand .l { color: rgba(255,255,255,.8); }
.hab-stat.brand .n { color: #fff; }

.plano-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.plano-hint { font-size: 13px; color: var(--ink-3); }
.plano-m2 {
    margin-left: auto; flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--brand-strong);
    background: var(--brand-tint); padding: 4px 12px; border-radius: 999px;
}

/* Plano por recorrido del perímetro: panel de paredes + lienzo */
.plano-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) { .plano-split { grid-template-columns: 320px 1fr; align-items: start; } }

.plano-stage {
    border: 1px solid var(--separator); border-radius: 14px; background: var(--bg);
    height: 340px; overflow: hidden;
}
.plano-stage svg { display: block; width: 100%; height: 100%; }
.plano-poly { fill: #BFD4E8; stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: round; }
.plano-closeline { stroke: var(--brand-strong); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plano-dim { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: inherit; }
.plano-empty { fill: var(--ink-3); font-size: 14px; }

.wall-panel { display: flex; flex-direction: column; gap: 10px; }
.wall-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-3); }
.wall-rows { display: flex; flex-direction: column; gap: 8px; }
.wall-row { display: flex; align-items: center; gap: 8px; }
.wall-n {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint);
    color: var(--brand-strong); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.wall-len {
    width: 78px; padding: 8px 9px; border: 1px solid var(--separator); border-radius: 9px;
    font-size: 15px; background: var(--surface); color: var(--ink);
}
.wall-dirs { display: inline-flex; gap: 3px; background: var(--bg); padding: 3px; border-radius: 10px; }
.wdir {
    width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--ink-2);
}
.wdir:hover { background: var(--fill); }
.wdir.on { background: var(--brand); color: #fff; }
.wall-del { background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 6px; border-radius: 8px; line-height: 0; }
.wall-del:hover { color: var(--danger); background: var(--fill); }
.wall-close { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.wall-close.ok { color: var(--success); }
.wall-close.warn { color: #B26A00; background: var(--warning-tint); padding: 8px 10px; border-radius: 10px; }

.hab-toolbar {
    display: flex; gap: 8px; margin-bottom: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}
.hab-toolbar::-webkit-scrollbar { display: none; }
.hab-toolbar .btn {
    flex: 0 0 auto; padding: 0 14px; height: 36px;
    font-size: 14px; font-weight: 500; border-radius: var(--r-full);
    gap: 6px; box-shadow: none;
}
.hab-toolbar .btn .ic { width: 16px; height: 16px; }
@media (min-width: 768px) {
    .hab-toolbar .btn { height: 38px; padding: 0 18px; font-size: 14px; }
}

/* Tabla de partidas (Aberturas / Servicios) */
.part-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.part-table thead th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
    color: var(--ink-3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--separator);
}
.part-table td { padding: 6px 8px; vertical-align: middle; }
.part-table .pt-serv { min-width: 160px; }
.part-table select.part-serv, .part-table .pt-in {
    width: 100%; padding: 8px 9px; border: 1px solid var(--separator); border-radius: 9px;
    font-size: 14px; background: var(--surface); color: var(--ink);
}
.part-table .pt-sm { max-width: 84px; }
.part-table .part-sub { font-weight: 600; color: var(--ink); white-space: nowrap; }
.part-table .part-del {
    background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 6px; border-radius: 8px; line-height: 0;
}
.part-table .part-del:hover { color: var(--danger); background: var(--fill); }
.part-table tfoot .part-total-row td { padding-top: 12px; border-top: 1px solid var(--separator); font-weight: 600; }
.part-table tfoot .part-total-row td:first-child { text-align: right; color: var(--ink-2); }
.part-table .part-total { color: var(--brand-strong); white-space: nowrap; }

/* Formularios de catálogo (servicios / empleados) */
.cat-form { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cat-form .cf { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.cat-form .cf input, .cat-form .cf select {
    padding: 9px 11px; border: 1px solid var(--separator); border-radius: 10px;
    font-size: 15px; background: var(--surface); color: var(--ink); font-weight: 400;
}
.cat-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.cat-check input { width: 18px; height: 18px; accent-color: var(--brand); }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }

/* Botón "usar presupuesto" en el renglón Rehabilitación de la calculadora */
.rh-budget { margin-top: 5px; }
.rh-budget-btn, .rh-budget-link {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: var(--brand-strong);
    background: var(--brand-tint); border: none; border-radius: 7px;
    padding: 3px 8px; text-decoration: none; line-height: 1.3;
}
.rh-budget-btn:hover, .rh-budget-link:hover { background: #DCE7F1; }

/* Fase Obra: avance + checklist */
.obra-prog { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.obra-bar { flex: 1; height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.obra-bar span { display: block; height: 100%; background: var(--success); border-radius: 999px; transition: width .25s ease; }
.obra-pct { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.obra-empty { text-align: center; padding: 6px 0 2px; }

.obra-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.obra-item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--separator); }
.obra-item:first-child { border-top: none; }
.obra-check { flex: 1; display: flex; align-items: center; gap: 11px; cursor: pointer; min-width: 0; }
.obra-check input { width: 22px; height: 22px; accent-color: var(--success); flex-shrink: 0; }
.obra-desc { font-size: 15px; color: var(--ink); }
.obra-item.is-done .obra-desc { color: var(--ink-3); text-decoration: line-through; }
.chk-emp {
    flex-shrink: 0; max-width: 150px; padding: 7px 9px; border: 1px solid var(--separator);
    border-radius: 9px; font-size: 13px; background: var(--surface); color: var(--ink-2);
}
.obra-del { background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 6px; border-radius: 8px; line-height: 0; }
.obra-del:hover { color: var(--danger); background: var(--fill); }
.obra-add { display: flex; gap: 8px; }
.obra-add input {
    flex: 1; padding: 10px 12px; border: 1px solid var(--separator); border-radius: 10px;
    font-size: 15px; background: var(--surface); color: var(--ink);
}
.obra-hint { font-size: 13px; color: var(--ink-3); margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.obra-hint a { color: var(--brand-strong); }
.obra-tag {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; vertical-align: middle;
    font-size: 11px; font-weight: 600; color: var(--brand-strong); background: var(--brand-tint);
    padding: 2px 8px; border-radius: 999px;
}
.obra-evis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; max-width: 210px; }
.obra-evi { position: relative; line-height: 0; }
.obra-evi img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid var(--separator); display: block; }
.obra-evi-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); background: var(--danger); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.obra-evi-add { width: 38px; height: 38px; border-radius: 8px; border: 1px dashed var(--separator); background: var(--bg); color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.obra-evi-add:hover { border-color: var(--brand); color: var(--brand); }
.obra-add-serv {
    flex: 1; min-width: 150px; padding: 10px 12px; border: 1px solid var(--separator); border-radius: 10px;
    font-size: 15px; background: var(--surface); color: var(--ink);
}
@media (max-width: 600px) { .obra-add { flex-wrap: wrap; } .obra-add-serv, .obra-add input { flex: 1 1 100%; } }

/* Obra: inicio + programación por servicio + cuadrilla */
.obra-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.obra-top .obra-prog { flex: 1; min-width: 200px; margin: 0; }
.obra-start { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.obra-start input { padding: 7px 10px; border: 1px solid var(--separator); border-radius: 9px; font-size: 14px; background: var(--surface); color: var(--ink); }

.task-prog {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--bg); border: 1px solid var(--separator); border-radius: 999px; padding: 5px 10px;
}
.task-prog:hover { border-color: var(--brand); }
.tp-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--brand-strong); white-space: nowrap; }
.tp-crew { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.crew-chip { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--fill); border-radius: 999px; padding: 2px 8px; }
.crew-empty { font-size: 11.5px; color: var(--ink-3); }
.obra-noteflag { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--warning); cursor: help; }
.modal-body textarea { resize: vertical; min-height: 48px; font-family: inherit; }

.prog-crew { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.prog-emp { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink); cursor: pointer; }
.prog-emp input { width: 18px; height: 18px; accent-color: var(--brand); }

/* ============================================================
   AGENDA multi-obra (semanal)
   ============================================================ */
/* Cuadro contenedor (Agenda como módulo): barra + cuadrícula en UN solo panel,
   estilo tarjeta del dashboard. La cuadrícula pierde su marco propio (evita
   tarjeta-dentro-de-tarjeta). */
.ag-board { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-card);
    box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 26px; }
.ag-board .ag-bar { margin-bottom: 14px; }
.ag-board .ag-week { border: none; border-radius: 0; box-shadow: none; margin-bottom: 0; }

.ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ag-nav { display: inline-flex; background: var(--surface); border: 1px solid var(--separator); border-radius: 12px; padding: 3px; box-shadow: var(--shadow-card); }
.ag-nav a { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .15s ease, color .15s ease; }
.ag-nav a:hover { background: var(--fill); color: var(--ink); }
.ag-nav a.active { background: var(--brand); color: #fff; }
.ag-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-filtros select { padding: 9px 12px; border: 1px solid var(--separator); border-radius: 10px; font-size: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

/* Semana = grid: columnas (días) × filas (carriles). Un servicio = un bloque que
   abarca las columnas de su duración (grid-template-rows se fija inline por PHP). */
.ag-week { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); background: var(--surface); border: 1px solid var(--separator); border-radius: 16px; box-shadow: var(--shadow-card); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 28px; }
.ag-col { border-left: 1px solid var(--separator); transition: background .15s ease; min-height: 72px; }
.ag-col:first-child { border-left: none; }
.ag-col.is-today { background: var(--brand-tint); }
.ag-col.drop-hover { background: #DCE7F1; box-shadow: inset 0 0 0 2px var(--brand); }
.ag-day-h { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 9px 10px 8px; border-bottom: 1px solid var(--separator); }
.ag-day-h .ag-dnum { font-size: 15px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.ag-day-h.is-today { color: var(--brand-strong); }
.ag-day-h.is-today .ag-dnum { background: var(--brand); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

/* Bloque de servicio (puede abarcar varias columnas/días) */
.ag-card { position: relative; z-index: 1; align-self: start; margin: 4px 5px; min-width: 0; display: block; text-decoration: none; cursor: grab; background: var(--surface); border: 1px solid var(--separator); border-radius: 10px; padding: 7px 9px; box-shadow: 0 1px 2px rgba(27,42,65,.07); transition: box-shadow .15s ease, border-color .15s ease; touch-action: none; -webkit-user-select: none; user-select: none; }
.ag-card:hover { border-color: var(--brand); box-shadow: 0 5px 16px rgba(27,42,65,.15); }
.ag-card:active { cursor: grabbing; }
.ag-card.is-done { background: rgba(52,199,89,.07); border-color: rgba(52,199,89,.32); }
.ag-card.is-done .ag-serv { color: var(--ink-2); }
.ag-status { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.ag-status.done { color: #157A3A; background: rgba(52,199,89,.16); }
.ag-status.pend { color: var(--ink-3); background: var(--fill); }
.ag-card.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.ag-card.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.ag-house { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--casa, var(--brand)); }
.ag-serv { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.ag-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ag-multi { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--brand-strong); background: var(--brand-tint); padding: 1px 7px; border-radius: 999px; }
.ag-note { display: inline-flex; color: var(--warning); }
.ag-crew { display: flex; flex-wrap: wrap; gap: 3px; }
.ag-ava { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Durante el arrastre, las tarjetas no capturan el puntero (para detectar la columna) */
body.ag-dragging .ag-card, body.ag-dragging .ag-day-h { pointer-events: none; }
body.ag-dragging { overflow: hidden; }
.ag-lifted { opacity: .4; transform: scale(.95); }
.ag-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .85; transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 12px 32px rgba(20,30,55,.25); }

/* Sin programar: bandeja (backlog) de chips arrastrables */
.ag-sp-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ag-sp { display: flex; align-items: center; gap: 10px; cursor: grab; background: var(--surface); border: 1px solid var(--separator); border-radius: 12px; padding: 10px 12px; transition: border-color .15s ease, box-shadow .15s ease; touch-action: none; -webkit-user-select: none; user-select: none; }
.ag-sp:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(27,42,65,.08); }
.ag-sp:active { cursor: grabbing; }
.ag-sp .ag-dot { width: 10px; height: 10px; }
.ag-sp-main { flex: 1; min-width: 0; }
.ag-sp-serv { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sp-casa { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sp-prog { background: var(--brand-tint); border: none; cursor: pointer; color: var(--brand-strong); padding: 7px; border-radius: 9px; line-height: 0; flex-shrink: 0; }
.ag-sp-prog:hover { background: #DCE7F1; }

.ag-verlink { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--brand-strong); text-decoration: none; white-space: nowrap; }
.ag-verlink:hover { text-decoration: underline; }
.ag-clearfecha { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-3); padding: 4px 0; }
.ag-clearfecha:hover { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .ag-card, .ag-sp, .ag-day, .ag-nav a { transition: none; } }

/* Arrastre por Pointer Events (mouse + touch): evita selección/callout en táctil */
.ag-card, .ag-sp { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ag-lifted { opacity: .4; }
.ag-ghost {
    position: fixed; left: 0; top: 0; transform: translate(-50%, -52%); pointer-events: none;
    z-index: 2000; width: 240px; opacity: .95; box-shadow: 0 12px 32px rgba(27,42,65,.3);
    border: 1px solid var(--brand); border-radius: 12px; background: var(--surface); padding: 8px 10px; rotate: -1.5deg;
}
.ag-ghost .ag-sp-prog, .ag-ghost .ag-crew { display: none; }

/* ============================================================
   MODAL reutilizable (overlay + tarjeta). openModal/closeModal en app.js.
   ============================================================ */
.ov { position: fixed; inset: 0; background: rgba(20,28,48,.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; z-index: 1000; padding: 40px 16px; overflow-y: auto; }
.ov.open { display: flex; }
.ov .modal { background: var(--surface); width: 100%; max-width: 460px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; animation: popin .18s ease; }
@keyframes popin { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ov .modal { animation: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--separator); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.modal-x:hover { background: var(--fill); color: var(--ink); }
.modal-body { padding: 6px 18px 4px; }
.modal-body .fld { padding: 12px 0; border-bottom: 1px solid var(--separator); }
.modal-body .fld:last-child { border-bottom: none; }
.modal-body label.lbl { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.modal-body input[type=text], .modal-body input[type=tel], .modal-body input[type=number], .modal-body select, .modal-body textarea {
    width: 100%; background: var(--fill-2); border: 1px solid var(--separator); border-radius: 10px; padding: 10px 12px; font-size: 16px; color: var(--ink);
}
.modal-body .fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.modal-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.modal-foot { display: flex; gap: 10px; padding: 14px 18px 18px; }
.modal-foot .btn { flex: 1; justify-content: center; }
.modal-foot .btn.light { flex: 0 0 auto; }

/* =========================================================================
   HABILITACIÓN · FASE VERIFICACIÓN (checklist de condiciones + fotos comisión)
   ========================================================================= */
/* Barra de avance del checklist (gemela de .obra-prog, en su propia tarjeta). */
.verif-prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.verif-bar { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--fill-2); overflow: hidden; }
.verif-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--brand);
    transition: width .4s cubic-bezier(.22,1,.36,1); }
.verif-pct { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .verif-bar > span { transition: none; }
}

/* =========================================================================
   VENTA · ficha de catálogo (propiedad) + galería de fotos
   ========================================================================= */
.vsec-h { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; }
.vform .phase-card { padding: 20px; }
.vfield { display: flex; flex-direction: column; margin-bottom: 16px; }
.vfield:last-child { margin-bottom: 0; }
.vfield > label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 7px; }
.vfield .req { color: var(--danger); font-weight: 700; }
.vfield input, .vfield select, .vfield textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--separator); border-radius: var(--r-sm); padding: 12px 14px; box-sizing: border-box;
    outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.vfield input::placeholder, .vfield textarea::placeholder { color: var(--ink-3); }
.vfield input:focus, .vfield select:focus, .vfield textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.vfield select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
    background-image: 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='%238A909C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
.vfield textarea { min-height: 120px; resize: vertical; }
.vhint { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
.vrow { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
.vrow:last-child { margin-bottom: 0; }
.vrow .vfield { margin-bottom: 0; }
@media (min-width: 560px) {
    .vrow.cols-2 { grid-template-columns: 1fr 1fr; }
    .vrow.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Botón primario verde (CTA de Venta). */
.btn.btn-green { background: var(--success); color: #fff; }
.btn.btn-green:hover { background: #2BB14E; }

/* Galería de fotos de la propiedad (miniatura grande con × rojo). */
.vfotos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.vfotos:empty { display: none; }
.vfoto { position: relative; line-height: 0; }
.vfoto img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--separator); display: block; }
.vfoto-x { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); cursor: pointer; padding: 0;
    background: var(--danger); color: #fff; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .12s var(--ease); }
.vfoto-x:hover { transform: scale(1.08); }

/* Selector de archivos en recuadro punteado (como el diseño). */
.vfoto-drop { border: 1.5px dashed var(--separator-strong); border-radius: var(--r-sm); padding: 16px 18px; background: var(--surface-2); }
.vfoto-drop input[type=file] { font-size: 14px; color: var(--ink-2); max-width: 100%; }
.vfoto-drop .vhint { margin-top: 8px; }

/* Panel de publicación al sitio externo. */
.pub-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pub-badge { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-full); }
.pub-badge.on { background: var(--success-tint); color: #1E7A36; }
.pub-badge.off { background: var(--fill-2); color: var(--ink-2); }
.pub-link { font-size: 14px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 2px; }
.pub-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pub-actions form { margin: 0; }

/* =========================================================================
   GASTOS (captura) + INVERSIONISTAS
   Paleta navy+azul del sistema; sin morado, sin emojis, sin franjas laterales.
   ========================================================================= */
/* Botones auxiliares */
.btn.sm { padding: 8px 13px; font-size: 14px; min-height: 38px; border-radius: 9px; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn.danger-solid { background: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: #E0352B; }
.iconbtn { width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; color: var(--ink-3);
    cursor: pointer; display: inline-grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.iconbtn:hover { background: var(--fill); color: var(--ink); }
.cat-del:hover, .inversion-del:hover { color: var(--danger); }
.pill.sm { padding: 3px 8px; font-size: 11px; }

/* Selects/inputs sueltos (fuera de .vfield): mismo look de caja */
.gsel, .split-row select, .split-row input,
.modal-body input[type=date], .modal-body input[type=email] {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--separator); border-radius: var(--r-sm); padding: 12px 14px; box-sizing: border-box;
    outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.gsel:focus, .split-row select:focus, .split-row input:focus,
.modal-body input[type=date]:focus, .modal-body input[type=email]:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
select.gsel { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
    background-image: 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='%238A909C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
.g-userfilter { flex: 0 0 auto; width: auto; min-width: 180px; }

/* Cards pequeñas de resumen (NO es dashboard) */
.g-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.g-card { background: var(--surface); border-radius: var(--r-card); padding: 14px 16px; box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 3px; min-width: 0; color: inherit; }
.g-card .l { font-size: 12px; color: var(--ink-3); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.g-card .l .ic { width: 14px; height: 14px; }
.g-card .n { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.g-card .s { font-size: 12px; color: var(--ink-3); }
a.g-card { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.g-card:hover { background: var(--surface-2); }
a.g-card.on { box-shadow: var(--shadow-card), 0 0 0 2px var(--brand) inset; }
@media (max-width: 560px) {
    .g-cards { grid-template-columns: 1fr 1fr; }
    .g-card:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* Resumen (gastado + registros) */
.g-summary { display: flex; border: 1px solid var(--separator); border-radius: var(--r-card); overflow: hidden; margin-bottom: 12px; background: var(--surface); }
.g-stat { flex: 1; padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.g-stat + .g-stat { border-left: 1px solid var(--separator); flex: 0 0 30%; }
.g-stat-l { font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.g-stat-n { font-size: clamp(18px, 5vw, 21px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-stat-main .g-stat-n { font-size: clamp(22px, 6.4vw, 28px); font-weight: 800; color: #1B2A41; }

/* Banner "por comprobar" (acción/filtro) */
.g-pc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--separator); border-radius: var(--r-card); background: var(--surface); margin-bottom: 18px; color: var(--ink-2); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.g-pc:hover { background: var(--surface-2); }
.g-pc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--warning-tint); color: #B26A00; flex: none; }
.g-pc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.g-pc-main strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.g-pc-main span { font-size: 12.5px; color: var(--ink-3); }
.g-pc-act { font-size: 13px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.g-pc.on { background: var(--brand-tint); border-color: transparent; }
.g-pc.on .g-pc-ic { background: #fff; }
.g-pc.on .g-pc-act { color: var(--brand-strong); }
@media (max-width: 420px) { .g-pc-act span:not(.ic), .g-pc-act { font-size: 0; } .g-pc-act .ic { width: 18px; height: 18px; } }

/* Menú "Administrar" (overflow del navbar) */
.navmenu { position: relative; display: inline-flex; }
.navmenu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 216px; background: var(--surface); border: 1px solid var(--separator); border-radius: 14px; box-shadow: 0 14px 34px rgba(15,27,45,.16); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s var(--ease); z-index: 1200; }
.navmenu.open .navmenu-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.navmenu-h { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 7px 12px 5px; }
.navmenu-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.navmenu-pop a:hover { background: var(--brand-tint); color: var(--brand-strong); }
.navmenu-pop a svg { color: var(--ink-3); flex: none; }
.navmenu-pop a:hover svg { color: var(--brand-strong); }

/* Comprobación de anticipos */
.gcomp-card { background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.g-saldo { display: flex; flex-direction: column; gap: 8px; }
.g-saldo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.g-saldo-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.g-saldo-row strong.pos { color: #2E9E4F; }
.g-saldo-row.total { border-top: 1px solid var(--separator); padding-top: 9px; margin-top: 1px; font-size: 15px; }
.g-saldo-row.total strong { font-size: 18px; font-weight: 800; }
.g-saldo-bar { height: 8px; border-radius: var(--r-full); background: var(--fill); overflow: hidden; }
.g-saldo-bar > i { display: block; height: 100%; background: #34C759; border-radius: inherit; transition: width var(--dur) var(--ease); }

/* Filtros (periodo + usuario) */
.g-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.g-filters .segmented { width: auto; flex: 1 1 260px; }

/* Fila de transacción: monto a la derecha (tabular) */
.g-trail { gap: 10px; }
.g-amount { font-weight: 700; color: var(--ink); font-size: 16px; white-space: nowrap; }

/* Segmented del destino del gasto (formulario) */
.gseg { display: flex; gap: 6px; background: var(--fill); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.gseg-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px;
    border: none; background: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; min-height: var(--tap); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.gseg-opt .ic { width: 17px; height: 17px; color: var(--ink-3); }
.gseg-opt.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-seg); }
.gseg-opt.on .ic { color: var(--brand); }
@media (max-width: 460px) { .gseg-opt { flex-direction: column; gap: 3px; font-size: 12px; } }

/* Toggles (por comprobar / dividir) */
.gtoggle { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.gtoggle input { width: 20px; height: 20px; accent-color: var(--brand); flex-shrink: 0; }
.gtoggle span { display: inline-flex; align-items: center; gap: 7px; }
.gtoggle span .ic { color: var(--ink-3); }
.gwhen-pc { margin-top: 8px; }

/* Categoría como GRID DE ÍCONOS (estilo "Gestor de gastos") */
.gcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.gcat-chip { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border: 1px solid var(--separator);
    background: var(--surface); border-radius: 14px; cursor: pointer; min-height: var(--tap);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gcat-chip:hover { background: var(--surface-2); }
.gcat-chip.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); background: var(--brand-tint); }
.gcat-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.gcat-ic-add { background: var(--fill) !important; color: var(--ink-3); }
.gcat-nm { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.25; max-width: 100%; }
.gcat-chip.on .gcat-nm { color: var(--ink); }
.gprov-row { display: flex; gap: 10px; align-items: stretch; }
.gprov-row .gsel { flex: 1; }
.gprov-row .btn { flex: 0 0 auto; }
.gprov-hint { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.prov-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.prov-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.prov-check input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }

/* Split (dividir entre casas) */
.split-wrap { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--separator); }
.split-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.split-row { display: grid; grid-template-columns: 1fr 140px 46px; gap: 8px; align-items: center; }
.split-del { border: none; background: var(--fill); color: var(--ink-3); border-radius: 10px; height: 46px; cursor: pointer; display: grid; place-items: center; }
.split-del:hover { background: var(--danger-tint); color: var(--danger); }
.split-sum { font-size: 13px; font-weight: 600; margin: 4px 0 0; color: var(--ink-3); }
.split-sum.ok { color: #1E7A36; }
.split-sum.warn { color: #B26A00; }
@media (max-width: 460px) { .split-row { grid-template-columns: 1fr 96px 46px; } }

/* Comprobantes (tickets / facturas) */
.gest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gcomp { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.gcomp:empty { display: none; }
.gcomp-item { position: relative; line-height: 0; }
.gcomp-item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--separator); display: block; }
.gcomp-file { width: 96px; height: 96px; border-radius: var(--r-sm); border: 1px solid var(--separator); background: var(--surface-2);
    display: grid; place-items: center; gap: 5px; color: var(--ink-3); }
.gcomp-file .gcomp-ext { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.gcomp-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface);
    cursor: pointer; padding: 0; background: var(--danger); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .12s var(--ease); }
.gcomp-x:hover { transform: scale(1.08); }
.gcomp-drop { border: 1.5px dashed var(--separator-strong); border-radius: var(--r-sm); padding: 16px 18px; background: var(--surface-2); }
.gcomp-drop input[type=file] { font-size: 14px; color: var(--ink-2); max-width: 100%; }
.gcomp-drop .vhint { margin-top: 8px; }

/* Categorías: picker de íconos, color, fila inactiva */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.icon-pick { height: 46px; border: 1px solid var(--separator); background: var(--surface); border-radius: 10px; color: var(--ink-2);
    cursor: pointer; display: grid; place-items: center; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.icon-pick:hover { background: var(--surface-2); }
.icon-pick.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-tint); }
.modal-body input[type=color] { width: 100%; height: 44px; border: 1px solid var(--separator); border-radius: var(--r-sm); background: var(--surface); padding: 4px; cursor: pointer; }
.modal-body .fld-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.cat-actions { gap: 2px; }
.row.is-off { opacity: .55; }

/* Editor de la plantilla del vale */
.tok-palette { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.tok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; border: 1px solid var(--separator);
    background: var(--surface-2); color: var(--ink-2); border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.tok:hover { background: var(--brand-tint); color: var(--brand-strong); border-color: var(--brand-tint); }
.tpl-editor { width: 100%; min-height: 380px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55;
    color: #E6EAF2; background: #1B2433; border: 1px solid #2A3547; border-radius: var(--r-sm); padding: 16px; resize: vertical; box-sizing: border-box; }
.tpl-editor:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }

/* Inversionistas */
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.inv-meta { font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.inv-meta .ic { color: var(--ink-3); }
.inv-notas { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }
.inv-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.inv-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px 18px; margin-bottom: 14px; }
.inv-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-type { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); background: var(--brand-tint); color: var(--brand-strong); }
.inv-type.inv-prestamo { background: var(--warning-tint); color: #B26A00; }
.inv-type.inv-mensual { background: var(--success-tint); color: #1E7A36; }
.inv-proj { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.inv-proj .ic { color: var(--ink-3); }
.inv-card-actions { margin-left: auto; display: flex; gap: 2px; }
.inv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.inv-stat { display: flex; flex-direction: column; gap: 2px; }
.inv-stat .l { font-size: 12px; color: var(--ink-3); }
.inv-stat .n { font-size: 17px; font-weight: 700; }
.inv-stat .n.warn { color: #B26A00; }
.inv-stat .n.ok { color: #1E7A36; }
.inv-card-notas { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.inv-abonos { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--separator); }
.inv-abonos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.inv-abono-list { display: flex; flex-direction: column; gap: 6px; }
.inv-abono { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.inv-abono .num { font-weight: 700; color: var(--ink); }

/* ===== REPORTES (estado de resultados) ===== */
.er-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.er-vivsel { flex: 1; min-width: 220px; }
.er-vivsel select { width: 100%; }
.er-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.er-card { background: var(--surface, #fff); border: 1px solid var(--separator); border-radius: var(--r-md, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.er-card.er-util { background: var(--brand-tint); border-color: transparent; }
.er-card .er-k { font-size: 13px; color: var(--ink-3); }
.er-card .er-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.er-monto { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.er-monto.pos { color: #2E9E4F; }
.er-monto.neg { color: var(--danger); }
.er-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 28px; padding: 16px 18px; background: var(--brand-tint); border-radius: var(--r-md, 14px); font-size: 16px; font-weight: 600; color: var(--ink); }
.er-total strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .er-cards { grid-template-columns: 1fr; } }

/* Estado de resultados — MATRIZ (columnas = grupos) */
.er-tablewrap { overflow-x: auto; border: 1px solid var(--separator); border-radius: var(--r-md, 14px); background: #fff; margin-bottom: 28px; -webkit-overflow-scrolling: touch; }
.er-tbl { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.er-tbl th, .er-tbl td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--separator); }
.er-tbl thead th { position: sticky; top: 0; z-index: 3; background: #1B2A41; color: #fff; font-weight: 600; font-size: 12px; border-bottom: none; }
.er-tbl thead th.er-col { min-width: 104px; }
.er-tbl thead th.er-vivienda { background: #25405F; }
.er-tbl thead th.er-inversionista { background: #2C5530; }
.er-tbl thead th.er-totcol { background: #0F1B2D; }
.er-sticky { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; box-shadow: 1px 0 0 var(--separator); }
.er-tbl thead th.er-sticky { z-index: 4; background: #1B2A41; }
.er-tbl tbody tr:nth-child(even) td:not(.er-sticky) { background: #FAFBFC; }
.er-cat { font-weight: 500; color: var(--ink); }
.er-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.er-tbl td.num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.er-tbl td.num.pos { color: #2E9E4F; }
.er-tbl td.num.neg { color: var(--ink-2); }
.er-totcol { font-weight: 700; box-shadow: -1px 0 0 var(--separator); }
.er-tbl td.er-totcol { background: #F5F8FB; }
.er-sec td { background: var(--brand-tint) !important; color: var(--brand-strong); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; text-align: left; position: sticky; left: 0; }
.er-sub td { font-weight: 700; background: #F2F5F8; border-top: 1px solid #D8DEE6; }
.er-sub td.er-sticky { background: #F2F5F8; }
.er-neto td { font-weight: 800; background: #1B2A41; color: #fff; border-top: 2px solid #0F1B2D; }
.er-neto td.er-sticky { background: #1B2A41; color: #fff; box-shadow: 1px 0 0 #0F1B2D; }
.er-empty td { color: var(--ink-3); }

/* ===== DASHBOARD (avance por vivienda) ===== */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dash-card { background: var(--surface, #fff); border: 1px solid var(--separator); border-radius: var(--r-md, 14px); padding: 16px 18px; }
.dash-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-dir { font-size: 16px; font-weight: 700; color: var(--ink); }
.dash-ciudad { font-size: 13px; color: var(--ink-3); }
.dash-proc { margin: 10px 0; }
.dash-proc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.dash-proc-h .pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-bar { height: 8px; border-radius: var(--r-full, 999px); background: var(--fill, #EEF0F3); overflow: hidden; }
.dash-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--dur, .2s) var(--ease, ease); }
.dash-bar > i.hab { background: #FF9F0A; }
.dash-bar > i.tra { background: #5AA9E6; }
.dash-bar > i.ven { background: #34C759; }
.dash-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--separator); }
.dash-foot .lbl { font-size: 13px; color: var(--ink-3); }
.dash-foot .val { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-venta-estado { font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .gseg-opt, .icon-pick, .iconbtn, a.g-card, .gcomp-x, .gcat-chip { transition: none; }
    .dash-bar > i { transition: none; }
}

/* ============================================================
   DASHBOARD v2 — gráficas de gasto (SVG propio) + tarjetas por casa
   ============================================================ */
.dch-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 900px) { .dch-grid { grid-template-columns: 1.25fr 1fr; } }

.dch-card {
    background: var(--surface); border: 1px solid var(--separator);
    border-radius: var(--r-card); padding: 16px 18px; min-width: 0;
}
.dch-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
}
.dch-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dch-leg .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dch-leg .tick { width: 2.5px; height: 12px; border-radius: 2px; background: var(--ink-2); display: inline-block; }
.dch-note { font-size: 12px; color: var(--ink-3); margin-top: 12px; }

/* --- Barras: gasto por vivienda (marca = presupuesto) --- */
.gv-rows { display: flex; flex-direction: column; gap: 7px; }
.gv-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 92px; align-items: center; gap: 10px; color: inherit; border-radius: 7px; padding: 2px 4px; }
.gv-row:hover { background: var(--surface-2); }
.gv-lbl { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-track { position: relative; height: 14px; background: var(--fill-2); border-radius: 5px; overflow: visible; }
.gv-fill { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: 5px; animation: gv-grow .55s var(--ease) both; transform-origin: left; }
.gv-fill.over { background: var(--warning); }
.gv-mark { position: absolute; top: -3px; bottom: -3px; width: 2.5px; border-radius: 2px; background: var(--ink-2); }
.gv-val { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; }
.gv-val.over { color: #B26A00; }
@keyframes gv-grow { from { transform: scaleX(0); } }

/* --- Dona: gasto por categoría --- */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 148px; height: 148px; flex-shrink: 0; }
.donut-total { font-size: 13px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.donut-sub { font-size: 9px; fill: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.donut-leg { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dl-row .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dl-n { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-v { color: var(--ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }

/* --- Columnas: gasto mensual --- */
.mc-cols { display: flex; align-items: stretch; gap: 10px; height: 150px; }
.mc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.mc-val { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.mc-barbox { flex: 1; width: 100%; max-width: 54px; display: flex; align-items: flex-end; }
.mc-bar { display: block; width: 100%; background: var(--brand); border-radius: 6px 6px 3px 3px; animation: mc-grow .55s var(--ease) both; transform-origin: bottom; }
.mc-lbl { font-size: 12px; color: var(--ink-3); }
@keyframes mc-grow { from { transform: scaleY(0); } }

/* --- Tarjeta por vivienda --- */
a.dash-card { display: block; color: inherit; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; overflow: hidden; }
a.dash-card:hover { box-shadow: 0 2px 6px rgba(20,30,55,.08), 0 12px 32px rgba(20,30,55,.10); transform: translateY(-1px); }
.dc-days { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--brand-strong); background: var(--brand-tint); border-radius: var(--r-full); padding: 3px 9px; }
.dc-mid { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dc-ring { position: relative; width: 84px; flex-shrink: 0; text-align: center; }
.dc-ring svg { width: 64px; height: 64px; display: block; margin: 0 auto; }
.dc-ring-n { position: absolute; top: 23px; left: 0; right: 0; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.dc-ring-l { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.dc-bars { flex: 1; min-width: 0; }
.dc-bars .dash-proc { margin: 0 0 10px; }
.dc-bars .dash-proc:last-child { margin-bottom: 0; }
.dc-budget { border-top: 1px solid var(--separator); padding-top: 11px; }
.dc-budget-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.dc-budget-h strong { font-size: 15px; color: var(--ink); }
.dc-budget-bar { height: 8px; border-radius: var(--r-full); background: var(--fill); overflow: hidden; }
.dc-budget-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; animation: gv-grow .55s var(--ease) both; transform-origin: left; }
.dc-budget-bar.over i { background: var(--danger); }
.dc-budget-n { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.dc-budget-n.over { color: #B3261E; font-weight: 600; }
.dc-spark { display: block; width: calc(100% + 36px); height: 34px; margin: 12px -18px -16px; }

@media (prefers-reduced-motion: reduce) {
    .gv-fill, .mc-bar, .dc-budget-bar i { animation: none; }
    a.dash-card { transition: none; }
}

/* ============================================================
   TABLA DE VIVIENDAS (.vt) — listados de Prospección y Calculadora.
   Desktop (≥1024px): tabla real con columnas alineadas; el encabezado y
   cada fila comparten la misma plantilla de grid (--vt-cols).
   Móvil: el encabezado se oculta y cada fila se apila al estilo iOS
   (dirección + estado, contacto debajo, deudas como línea compacta).
   Las filas siguen siendo <a class="row"> → el buscador (filtrarViviendas)
   y los separadores/hover de .list funcionan sin cambios.
   ============================================================ */
.vt {
    --vt-cols: minmax(150px, 1.2fr) minmax(200px, 1.7fr)
               repeat(4, minmax(112px, .9fr)) minmax(120px, 1fr) 118px 18px;
}

.vt .vt-head { display: none; }

/* ---- Móvil: fila apilada ---- */
.vt .vt-row { flex-wrap: wrap; row-gap: 2px; column-gap: 8px; padding-right: 38px; position: relative; }

.vt-viv { order: 1; flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; }
.vt-dir { font-size: 17px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-city { font-size: 13px; color: var(--ink-3); margin-top: 1px; }

.vt-status { order: 2; flex-shrink: 0; margin-left: auto; }

.vt-contact { order: 3; width: 100%; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-contact::before { content: 'Contacto · '; color: var(--ink-3); }
.vt-contact.is-empty { display: none; }

.vt-money { order: 4; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vt-money::before { content: attr(data-l) ' '; color: var(--ink-3); }
.vt-money.is-empty { display: none; }

.vt-extra { order: 5; width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vt-extra .bar { flex: 1; max-width: 120px; }
.vt-extra .vt-n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.vt-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ink-3); }

/* ---- Desktop: tabla ---- */
@media (min-width: 1024px) {
    /* El encabezado queda FIJO bajo la navbar al hacer scroll (sticky).
       overflow:hidden del .list rompe sticky → visible, y los redondeos
       pasan al encabezado (arriba) y a la última fila (abajo). */
    .vt { overflow: visible; }
    .vt a.row:last-of-type { border-radius: 0 0 var(--r-card) var(--r-card); }

    .vt .vt-head {
        display: grid; grid-template-columns: var(--vt-cols); column-gap: 14px;
        align-items: center; padding: 10px 16px;
        font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        color: var(--ink-2); background: var(--surface-2);
        border-bottom: 1px solid var(--separator); white-space: nowrap;
        position: sticky; top: 52px; z-index: 5;   /* 52px = alto de la navbar */
        border-radius: var(--r-card) var(--r-card) 0 0;
    }
    .vt .vt-head .r { text-align: right; }

    .vt .vt-row { display: grid; grid-template-columns: var(--vt-cols); column-gap: 14px; align-items: center; padding: 9px 16px; }

    .vt-viv { order: 0; flex: none; }
    .vt-dir { font-size: 14.5px; }
    .vt-city { font-size: 12px; margin-top: 0; }

    .vt-contact { order: 0; width: auto; font-size: 14px; font-weight: 500; color: var(--ink); }
    .vt-contact::before { content: none; }
    .vt-contact.is-empty { display: block; color: var(--ink-3); font-weight: 400; }

    .vt-money { order: 0; display: block; text-align: right; font-size: 13.5px; color: var(--ink); }
    .vt-money::before { content: none; }
    .vt-money.is-empty { display: block; color: var(--ink-3); }

    .vt-status { order: 0; margin-left: 0; justify-self: start; }

    .vt-extra { order: 0; width: auto; margin-top: 0; }
    .vt-extra .bar { max-width: 90px; }

    .vt-chev { position: static; transform: none; justify-self: end; }
}

/* ============================================================
   BARRA DE FILTROS DE LISTADO (.lbar) — buscador + selects + orden.
   Los selects (.lsel con data-k) filtran por data-<k> de las filas;
   .lsort reordena. Todo combinado en app.js → aplicarFiltrosLista().
   ============================================================ */
.lbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.lbar .searchbar { flex: 1 1 240px; min-width: 200px; margin-bottom: 0; }

.lctl {
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    background: var(--surface); border: 1px solid var(--separator); border-radius: 12px;
    padding: 0 12px; min-height: 46px; box-shadow: var(--shadow-card);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lctl:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.lctl > .lctl-lbl { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.lctl select {
    appearance: none; -webkit-appearance: none; background: transparent; border: none;
    font: inherit; font-size: 15px; color: var(--ink); min-height: 44px;
    padding-right: 22px; max-width: 170px; cursor: pointer;
}
.lctl select:focus, .lctl select:focus-visible { outline: none; box-shadow: none; }
/* select con valor activo → se nota que hay un filtro aplicado */
.lctl.on { border-color: var(--brand); }
.lctl.on > .lctl-lbl { color: var(--brand-strong); }
.lctl .chev { position: absolute; right: 10px; pointer-events: none; color: var(--ink-3); display: flex; }
.lbar .lcount { flex-basis: 100%; font-size: 13px; color: var(--ink-3); padding: 0 2px; }

@media (min-width: 1024px) {
    .lbar { gap: 12px; margin-bottom: 18px; }
    .lbar .lcount { flex-basis: auto; margin-left: auto; }
}

/* Pastilla de prospecto descartado */
.pill.discard { background: var(--danger-tint); color: #B3261E; }
.pill.discard .dot { background: var(--danger); }

/* ============================================================
   DESCARTE DE PROSPECTO — diálogo de confirmación (nativo <dialog>)
   y banner de estado en el expediente.
   ============================================================ */
dialog.discard-dlg {
    border: none; border-radius: var(--r-card); padding: 0;
    width: min(440px, calc(100vw - 40px));
    box-shadow: 0 24px 64px rgba(20,30,55,.28);
    background: var(--surface); color: var(--ink);
}
dialog.discard-dlg::backdrop { background: rgba(20, 28, 44, .42); }
.discard-dlg form { display: flex; flex-direction: column; gap: 0; }
.discard-dlg .dlg-body { padding: 22px 22px 4px; }
.discard-dlg h3 { font-size: 18px; margin-bottom: 6px; }
.discard-dlg .dlg-txt { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
.discard-dlg label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.discard-dlg textarea {
    width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 15px;
    color: var(--ink); background: var(--surface-2); border: 1px solid var(--separator);
    border-radius: var(--r-row); padding: 10px 12px;
}
.discard-dlg textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.discard-dlg .dlg-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
.discard-dlg .btn.danger { background: var(--danger); color: #fff; }
.discard-dlg .btn.danger:hover { filter: brightness(.94); }

/* ============================================================
   PRE-HABILITACIÓN (borrador en Prospección) — checklist de servicios
   ============================================================ */
.svc-group { margin: 0 0 18px; }
.svc-cat {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-2); padding: 0 2px 8px;
}
.svc-row {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--separator);
    border-radius: var(--r-row); background: var(--surface-2); margin-bottom: 8px;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc-row:hover { border-color: var(--separator-strong); }
.svc-row input[type="checkbox"] {
    width: 22px; height: 22px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer;
}
.svc-row:has(input:checked) { background: var(--brand-tint); border-color: var(--brand); }
.svc-name { flex: 1; min-width: 0; font-size: 15.5px; color: var(--ink); }
.svc-row:has(input:checked) .svc-name { font-weight: 600; }
.svc-unit { font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
fieldset[disabled] .svc-row { cursor: default; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .svc-row { transition: none; } }

/* ============================================================
   TIEMPOS DEL PROCESO (bitácora VIVIENDA_FASES) — línea de tiempo
   ============================================================ */
.tl-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
    padding: 14px 16px; margin-bottom: 22px; font-size: 14.5px; color: var(--ink-2);
}
.tl-total { font-size: 20px; font-weight: 800; color: var(--ink); }
.tl-gh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-gh > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.tl-gh-d { font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.tl-row { align-items: flex-start; }
.tl-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 7px;
    background: var(--separator-strong);
}
.tl-dot.on  { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.tl-dot.fin { background: var(--success); }
.tl-status { font-size: 15.5px; white-space: normal; }
.tl-now { color: var(--brand-strong); font-size: 13px; font-weight: 600; }
.tl-dias { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.tl-open { background: var(--surface-2); }

/* Reportes de avance: filas clicables + mini barra de progreso en celda */
.rep-click tbody tr { cursor: pointer; }
.rep-click tbody tr:hover td:not(.er-sticky) { background: #F0F4F8; }
.rep-click tbody tr:hover td.er-sticky { background: #F0F4F8; }
.rep-click tbody tr.rep-sel td { background: var(--brand-tint); }
.rep-click tbody tr.rep-sel td.er-sticky { background: var(--brand-tint); }
.rep-bar { display: inline-flex; align-items: center; gap: 8px; }
.rep-bar .bar { width: 74px; }
.rep-bar .num { font-size: 12px; color: var(--ink-2); }
/* la dirección no debe empujar las columnas de días fuera de la vista */
.rep-click .er-sticky .er-cat {
    display: block; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* affordance de "esta fila abre algo": chevron al final */
.rep-chev-h { width: 30px; }
.rep-chev { color: var(--separator-strong); padding-left: 4px !important; padding-right: 10px !important; }
.rep-click tbody tr:hover .rep-chev { color: var(--brand); }
.rep-click tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* etapa del embudo (pipeline) */
.rep-etapa { font-weight: 600; color: var(--ink); }
.rep-etapa.lista { color: #1E7A36; }
.rep-etapa.lista::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; vertical-align: 1px; }

/* ---- Modal de detalle de casa (reportes): contenido del panel ---- */
.ov .modal.wide { max-width: 720px; }
.pnl-body { padding: 16px 18px 18px; max-height: min(72vh, 760px); overflow-y: auto; }
.pnl-loading { padding: 28px 0; text-align: center; color: var(--ink-3); font-size: 14.5px; }

.pnl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.pnl-stat { background: var(--surface-2); border: 1px solid var(--separator); border-radius: var(--r-row); padding: 10px 12px; }
.pnl-stat .l { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); margin-bottom: 3px; }
.pnl-stat .n { font-size: 18px; font-weight: 800; color: var(--ink); }

.pnl-falta {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--warning-tint); color: #B26A00; border-radius: var(--r-row);
    padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 16px;
}
.pnl-falta .ic { flex-shrink: 0; margin-top: 2px; }

.pnl-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 16px 0 8px; }
.pnl-list { border: 1px solid var(--separator); border-radius: var(--r-row); overflow: hidden; }
.pnl-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface); }
.pnl-row + .pnl-row { border-top: 1px solid var(--separator); }
.pnl-row .tl-dot { margin-top: 5px; }
.pnl-main { flex: 1; min-width: 0; }
.pnl-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pnl-s { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.pnl-d { flex-shrink: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }

.pnl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pnl-links .btn { font-size: 14px; padding: 8px 14px; min-height: 38px; }

/* banner de expediente descartado */
.discard-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--danger-tint); color: #B3261E;
    border-radius: var(--r-row); padding: 12px 16px; margin-bottom: 16px; font-size: 14.5px;
}
.discard-banner .grow { flex: 1; min-width: 200px; }
.discard-banner strong { font-weight: 700; }
.discard-banner .motivo { display: block; font-size: 13px; color: #8C2F27; margin-top: 2px; }

/* acción destructiva discreta del pie del formulario */
.btn-discard {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 15px; font-weight: 600; color: var(--danger);
    padding: 10px 12px; border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease);
}
.btn-discard:hover { background: var(--danger-tint); }
/* Zona de peligro: al FINAL de la página, lejos del Guardar (evita toques accidentales) */
.danger-zone { margin: 4px 0 30px; padding-top: 14px; border-top: 1px solid var(--separator); text-align: center; }
@media (min-width: 1024px) { .danger-zone { text-align: left; } }

@media (prefers-reduced-motion: reduce) {
    .lctl, .searchbar, .btn-discard { transition: none; }
}