/* ============================================================================
   Tema Jardines de Concepción — vidrio a dos colores
   Verde de la marca + arena dorada. Modo claro = fondo ARENA, modo oscuro = fondo VERDE.
   Se carga DESPUÉS de dist/ (Tailwind) y css/styles.css: reasigna las rampas
   primary/accent y suaviza los neutros de Tailwind (bg-white, gray-*) para que
   todos los módulos tomen el tema sin tocarlos uno por uno.
   Vidrio (backdrop-filter) solo en la estructura (menú, barra, tarjetas .j-vidrio):
   las tablas y formularios van sobre paneles casi sólidos para leer cifras.
   ============================================================================ */

:root, :root[data-scheme] {
    /* Verde de la marca, más vivo (700 = #1B4D33) */
    --primary-50:  236 244 238;
    --primary-100: 212 230 217;
    --primary-200: 167 203 178;
    --primary-300: 112 166 128;
    --primary-400:  62 128  88;
    --primary-500:  41 104  68;
    --primary-600:  31  85  55;
    --primary-700:  27  77  51;
    --primary-800:  20  60  40;
    --primary-900:  14  44  29;
    /* Arena dorada (500 = #E7B868) */
    --accent-50:  251 243 226;
    --accent-100: 247 231 198;
    --accent-300: 239 205 140;
    --accent-500: 231 184 104;
    --accent-600: 212 154  68;
    --accent-700: 168 116  58;

    /* ── Tokens del tema: modo claro (ARENA) ── */
    --j-fondo:      #F3DFB8;
    --j-forma:      #1B4D33;   /* el "otro" color, en las formas del fondo */
    --j-forma-op:   .10;
    --j-texto:      #123A26;
    --j-suave:      #3F5A45;
    --j-tenue:      #7A7356;
    --j-acento:     #1B4D33;
    --j-acento-txt: #FBF3DF;
    --j-vidrio:     rgba(255, 252, 246, .40);
    --j-vidrio-2:   rgba(255, 252, 246, .62);
    --j-borde:      rgba(255, 255, 255, .70);
    --j-brillo:     rgba(255, 255, 255, .90);
    --j-linea:      rgba(30, 54, 36, .22);
    --j-panel:      #FFFCF7;   /* sólido: tablas y formularios no se mezclan con el fondo */
    --j-panel-th:   #F3E8D1;   /* encabezados de tabla y columnas fijas */
    --j-panel-borde: rgba(122, 92, 48, .16);
    --j-tinte:      rgba(120, 90, 40, .055);
    --j-sombra:     0 12px 30px -10px rgba(60, 44, 20, .22);
}
html.dark, html.dark[data-scheme] {
    /* ── Modo oscuro (VERDE). [data-scheme] para ganarle a :root[data-scheme] ── */
    --j-fondo:      #1B4D33;
    --j-forma:      #E7B868;
    --j-forma-op:   .22;
    --j-texto:      #FBF6EC;
    --j-suave:      #D7D9C4;
    --j-tenue:      #9DB49F;
    --j-acento:     #E7B868;
    --j-acento-txt: #1B2E1F;
    --j-vidrio:     rgba(251, 246, 236, .09);
    --j-vidrio-2:   rgba(251, 246, 236, .16);
    --j-borde:      rgba(251, 246, 236, .22);
    --j-brillo:     rgba(255, 255, 255, .24);
    --j-linea:      rgba(251, 246, 236, .30);
    --j-panel:      #153C28;
    --j-panel-th:   #10301F;
    --j-panel-borde: rgba(251, 246, 236, .14);
    --j-tinte:      rgba(251, 246, 236, .05);
    --j-sombra:     0 14px 34px -12px rgba(0, 0, 0, .45);
}

/* ── Tipografía: Jost (la de "RESIDENCIALES" en el logo) ── */
body { font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.num, td, .tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Fondo: un color + formas suaves del otro + el ornamento del logo ── */
html, html.dark, body.bg-gray-50, html.dark body { background: var(--j-fondo) !important; color: var(--j-texto); }
.j-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.j-fondo i { position: absolute; border-radius: 50%; background: var(--j-forma); filter: blur(8px); opacity: var(--j-forma-op); }
.j-fondo i:nth-child(1) { width: 46vw; height: 46vw; left: 6vw; top: -22vw; }
.j-fondo i:nth-child(2) { width: 30vw; height: 30vw; right: -8vw; top: 32vh; opacity: calc(var(--j-forma-op) * .7); }
.j-fondo i:nth-child(3) { width: 24vw; height: 24vw; left: 36vw; bottom: -12vw; opacity: calc(var(--j-forma-op) * .6); }
.j-fondo img { position: absolute; right: 3vw; bottom: -5vh; width: 34vw; max-width: 500px; opacity: .07; }
html:not(.dark) .j-fondo img { filter: brightness(.35) sepia(.5) hue-rotate(60deg); }
/* Arena: el verde sobre arena se ensucia (gris oliva). La forma grande es una luz cálida
   y las otras dos llevan el verde muy tenue. */
html:not(.dark) .j-fondo i:nth-child(1) { background: #FFF5DF; opacity: .75; filter: blur(24px); }
html:not(.dark) .j-fondo i:nth-child(2), html:not(.dark) .j-fondo i:nth-child(3) { opacity: .07; filter: blur(16px); }
.j-shell { position: relative; z-index: 1; }

/* ── Vidrio ── */
.j-vidrio {
    background: var(--j-vidrio);
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    backdrop-filter: blur(20px) saturate(115%);
    border: 1px solid var(--j-borde);
    box-shadow: inset 0 1px 0 var(--j-brillo), var(--j-sombra);
}
/* Teléfonos: menos desenfoque (los de gama baja sufren con 20px) */
@media (max-width: 768px) {
    .j-vidrio { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ── Menú lateral ── */
.j-aside { color: var(--j-texto); }
@media (min-width: 1024px) {
    .j-aside { margin: 16px 0 16px 16px; height: calc(100vh - 32px) !important; top: 16px !important; border-radius: 22px; }
}
@media (max-width: 1023px) {
    .j-aside { background: var(--j-fondo); border-radius: 0 22px 22px 0; }
}
.j-arco { width: 38px; height: 34px; border-radius: 19px 19px 0 0; background: #FBF6EC; border: 1.5px solid #A8805F;
          display: grid; place-items: center; flex: none; }
.j-arco img { width: 24px; }
.j-marca-1 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--j-texto); }
.j-marca-2 { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--j-acento); }
html:not(.dark) .j-marca-2 { color: #A8743A; }
.j-grupo { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--j-tenue); }
.j-nav { color: var(--j-suave); border-radius: 12px; position: relative; }
.j-nav:hover { background: var(--j-vidrio-2); color: var(--j-texto); }
.j-nav.activo { background: var(--j-acento); color: var(--j-acento-txt); font-weight: 500; }
/* Foco: sin el contorno azul del navegador al hacer clic; con teclado, uno del tema */
.j-nav:focus { outline: none; }
.j-nav:focus-visible { outline: 2px solid var(--j-acento); outline-offset: 2px; }
.j-nav .j-badge { margin-left: auto; font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--j-linea); font-variant-numeric: tabular-nums; }
.j-nav.activo .j-badge { border-color: transparent; background: rgba(0,0,0,.14); }
.j-sep { height: 1px; background: var(--j-borde); }
/* Minimizado: contadores como globito sobre el ícono, y nombre al pasar el mouse */
.j-mini .j-nav .j-badge { position: absolute; top: 2px; right: 6px; margin: 0; font-size: 9px; padding: 2px 5px;
                          background: var(--j-acento); color: var(--j-acento-txt); border-color: transparent; }
.j-mini .j-nav .j-tip { display: none; }
@media (min-width: 1024px) {
    .j-mini .j-nav:hover .j-tip { display: block; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
        white-space: nowrap; background: var(--j-acento); color: var(--j-acento-txt); padding: 6px 10px; border-radius: 8px; font-size: 13px; z-index: 60; }
}
.j-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--j-acento); color: var(--j-acento-txt);
            display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; }
.j-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--j-linea); display: grid; place-items: center;
              color: var(--j-suave); background: transparent; }
.j-icon-btn:hover { background: var(--j-vidrio-2); color: var(--j-texto); }
.j-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
          border: 1px solid var(--j-linea); font-size: 13px; color: var(--j-suave); }
.j-chip:hover { background: var(--j-vidrio-2); }

/* ── Barra superior ── */
.j-header { color: var(--j-texto); }
@media (min-width: 1024px) { .j-header { margin: 16px 16px 0; border-radius: 18px; top: 16px !important; } }
@media (max-width: 1023px) { .j-header { margin: 8px 8px 0; border-radius: 16px; top: 8px !important; } }
.j-titulo { font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; color: var(--j-texto); }
.j-footer { color: var(--j-tenue); border-color: transparent !important; }

/* ── Botones del tema ── */
.j-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
         font: 500 12px 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--j-linea);
         color: var(--j-texto); background: transparent; cursor: pointer; white-space: nowrap; }
.j-btn:hover { background: var(--j-vidrio-2); }
.j-btn-solido { background: var(--j-acento); color: var(--j-acento-txt); border-color: transparent; }
.j-btn-solido:hover { background: var(--j-acento); filter: brightness(1.06); }
.j-ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--j-linea); display: grid; place-items: center; flex: none; color: var(--j-texto); }
.j-alto { text-transform: uppercase; letter-spacing: .08em; }
.j-hero-titulo { font-weight: 300; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--j-texto); }
.j-hero-titulo b { font-weight: 500; color: var(--j-acento); }
html:not(.dark) .j-hero-titulo b { color: #1B4D33; }
.j-suave { color: var(--j-suave); } .j-tenue { color: var(--j-tenue); }

/* ============================================================================
   Neutros de Tailwind → paneles del tema (aplica a TODOS los módulos)
   ============================================================================ */
/* Modo claro */
html:not(.dark) .bg-white { background-color: var(--j-panel); }
html:not(.dark) .bg-gray-50 { background-color: #FAF2E2; }   /* sólido: se usa también como caja sobre el fondo */
html:not(.dark) .hover\:bg-gray-50:hover, html:not(.dark) .hover\:bg-gray-100:hover { background-color: rgba(120, 90, 40, .08); }
html:not(.dark) .bg-gray-100 { background-color: rgba(120, 90, 40, .09); }
html:not(.dark) .border-gray-100, html:not(.dark) .divide-gray-100 > * + *, html:not(.dark) .border-gray-200 { border-color: var(--j-panel-borde); }
html:not(.dark) .border-gray-300 { border-color: rgba(122, 92, 48, .26); }
html:not(.dark) .bg-gray-900\/40, html:not(.dark) .bg-gray-50\/60 { background-color: #FAF2E2; }
html:not(.dark) .shadow-sm { box-shadow: 0 6px 18px -10px rgba(60, 44, 20, .25); }
html:not(.dark) .text-gray-800, html:not(.dark) .text-gray-900 { color: #1F2A22; }
html:not(.dark) .text-gray-700 { color: #3A4436; }
html:not(.dark) .text-gray-500 { color: #6E6955; }
html:not(.dark) .text-gray-400 { color: #8F8970; }
html:not(.dark) input.bg-white, html:not(.dark) select.bg-white, html:not(.dark) textarea.bg-white { background-color: rgba(255, 253, 249, .96); }

/* Modo oscuro (selectores con html.dark para ganar a `.dark\:x:is(.dark *)`) */
html.dark .dark\:bg-gray-800 { background-color: var(--j-panel); }
html.dark .dark\:bg-gray-800\/80 { background-color: rgba(14, 44, 29, .72); }
html.dark .dark\:bg-gray-900 { background-color: #0F2F1E; }
html.dark .dark\:bg-gray-900\/40, html.dark .dark\:bg-gray-900\/30 { background-color: #123523; }
html.dark .dark\:bg-gray-700 { background-color: rgba(251, 246, 236, .08); }
html.dark .dark\:hover\:bg-gray-700:hover, html.dark .dark\:hover\:bg-gray-700\/40:hover { background-color: rgba(251, 246, 236, .07); }
html.dark .dark\:border-gray-700, html.dark .dark\:divide-gray-700 > * + *, html.dark .dark\:border-gray-800 { border-color: var(--j-panel-borde); }
html.dark .dark\:border-gray-600 { border-color: rgba(251, 246, 236, .22); }
html.dark .text-gray-400, html.dark .text-gray-500 { color: #A7B9A5; }
html.dark .dark\:text-gray-400 { color: #B4C3B1; }
/* Tablas: fondo sólido siempre. El encabezado fijo (sticky) y las columnas fijas
   necesitan color propio, si no las filas se ven a través al hacer scroll.
   !important porque los módulos traen bg-gray-50 / dark:bg-gray-900/40 en el thead. */
table { background-color: var(--j-panel); }
table thead, table thead th { background-color: var(--j-panel-th) !important; }
thead.sticky, th.sticky, td.sticky { z-index: 2; }
td.sticky { background-color: var(--j-panel) !important; }
th.sticky { background-color: var(--j-panel-th) !important; }
/* Modales: fondo del overlay con un toque verde en vez de negro puro */
html.dark .bg-black\/50, html.dark .bg-black\/40 { background-color: rgba(6, 20, 12, .62); }

/* Badges de estado de lote con los dos colores */
.badge-disponible { background: rgb(var(--primary-100)); color: rgb(var(--primary-800)); }
.badge-reservado  { background: rgb(var(--accent-100)); color: rgb(var(--accent-700)); }
.badge-vendido    { background: rgba(120, 90, 40, .12); color: #4A4636; }
html.dark .badge-disponible { background: rgba(167, 203, 178, .18); color: #CFE3D4; }
html.dark .badge-reservado  { background: rgba(231, 184, 104, .22); color: #F2D39C; }
html.dark .badge-vendido    { background: rgba(251, 246, 236, .10); color: #D7D9C4; }

/* Scroll y selección */
::selection { background: rgba(231, 184, 104, .45); }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(30, 54, 36, .25); }
html.dark .thin-scroll::-webkit-scrollbar-thumb { background: rgba(251, 246, 236, .22); }

/* SweetAlert2 (confirmaciones y avisos) con la marca */
.swal2-popup { font-family: 'Jost', sans-serif !important; border-radius: 20px !important; }
html.dark .swal2-popup { background: #173F2B !important; color: #FBF6EC !important; }
.swal2-styled.swal2-confirm { background: #1B4D33 !important; border-radius: 999px !important; }
html.dark .swal2-styled.swal2-confirm { background: #E7B868 !important; color: #1B2E1F !important; }
.swal2-styled.swal2-cancel { border-radius: 999px !important; }

@media print {
    .j-fondo { display: none !important; }
    html, body { background: #fff !important; color: #111 !important; }
    table, table thead, table thead th, td.sticky, th.sticky { background-color: #fff !important; }
}

.j-tip { display: none; }

/* .j-icon-btn define display: respetar las utilidades de visibilidad de Tailwind */
.j-icon-btn.hidden { display: none; }
@media (min-width: 1024px) {
    .j-icon-btn.lg\:hidden { display: none; }
    .j-icon-btn.lg\:grid { display: grid; }
}

/* ── Piezas del dashboard (reutilizables en otros módulos) ── */
.j-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 14px 6px; color: var(--j-texto); }
.j-kpi { display: flex; gap: 12px; align-items: center; padding: 6px 16px; }
.j-kpi + .j-kpi { border-left: 1px solid var(--j-borde); }
@media (max-width: 767px) { .j-kpi + .j-kpi { border-left: 0; border-top: 1px solid var(--j-borde); padding-top: 12px; margin-top: 6px; } }
.j-kpi-l { font-size: 12px; color: var(--j-suave); }
.j-kpi-v { font-size: 26px; line-height: 1.2; font-weight: 400; }
.j-kpi-s { font-size: 11px; color: var(--j-tenue); }
/* Panel de datos: casi sólido, para leer montos sin esfuerzo */
.j-panel { background: var(--j-panel); border: 1px solid var(--j-panel-borde); box-shadow: var(--j-sombra); color: var(--j-texto); }
.j-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 150px 130px; gap: 10px; align-items: center;
          padding: 11px 0; border-top: 1px solid var(--j-panel-borde); font-size: 14px; color: inherit; text-decoration: none; }
a.j-fila:hover { background: var(--j-tinte); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.j-fila-th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--j-tenue); border-top: 0; padding-bottom: 6px; }
@media (max-width: 767px) { .j-fila { grid-template-columns: minmax(0, 1fr) auto auto; } }
/* ── Tonos de estado: verde = bien, ámbar = atención, rojo = alerta ──
   Fuera de los dos colores de la marca a propósito: una alerta tiene que saltar a la vista.
   Uso: .j-t-ok / .j-t-aviso / .j-t-alerta en el contenedor; las piezas leen --t y --t-bg. */
:root, :root[data-scheme] {
    --j-ok: #17703F;     --j-ok-bg: rgba(23, 112, 63, .13);
    --j-aviso: #B45309;  --j-aviso-bg: rgba(217, 119, 6, .15);
    --j-alerta: #B42318; --j-alerta-bg: rgba(220, 38, 38, .12);
}
html.dark, html.dark[data-scheme] {
    --j-ok: #86E0AE;     --j-ok-bg: rgba(134, 224, 174, .16);
    --j-aviso: #FFC861;  --j-aviso-bg: rgba(255, 200, 97, .18);
    --j-alerta: #FF8B7E; --j-alerta-bg: rgba(255, 107, 94, .20);
}
.j-t-ok     { --t: var(--j-ok);     --t-bg: var(--j-ok-bg); }
.j-t-aviso  { --t: var(--j-aviso);  --t-bg: var(--j-aviso-bg); }
.j-t-alerta { --t: var(--j-alerta); --t-bg: var(--j-alerta-bg); }
/* Cifras: ícono relleno del tono y el número en el tono */
.j-kpi[class*="j-t-"] .j-ico, .j-card[class*="j-t-"] .j-ico { background: var(--t-bg); border-color: transparent; color: var(--t); }
.j-kpi[class*="j-t-"] .j-kpi-v { color: var(--t); font-weight: 500; }
.j-kpi.j-t-alerta { background: var(--t-bg); border-radius: 14px; }
.j-kpi.j-t-alerta + .j-kpi, .j-kpi + .j-kpi.j-t-alerta { border-left-color: transparent; }
/* Tarjetas de acceso: franja del tono arriba y la cifra destacada */
.j-card[class*="j-t-"] { box-shadow: inset 0 3px 0 var(--t), inset 0 1px 0 var(--j-brillo), var(--j-sombra); }
.j-cifra { font-weight: 600; font-size: 1.15em; color: var(--j-texto); }
.j-card[class*="j-t-"] .j-cifra { color: var(--t); }

.j-pill { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--j-linea); white-space: nowrap; }
/* Por vencer (otro día): ámbar suave · Vence hoy: ámbar sólido · Vencido: ámbar fuerte · Moroso: rojo sólido */
.j-pill-prox { color: var(--j-aviso); border-color: currentColor; background: transparent; }
.j-pill-hoy  { color: #3B2503; background: #F2B544; border-color: transparent; font-weight: 500; }
.j-pill-ven  { color: var(--j-aviso); background: var(--j-aviso-bg); border-color: currentColor; font-weight: 500; }
.j-pill-mor  { color: #fff; background: #C2362B; border-color: transparent; font-weight: 500; }
html.dark .j-pill-mor { background: #E5544A; }

/* ── Modo verde: lo que en claro es verde de marca, aquí es arena ──
   (verde sobre verde no se lee). Solo afecta utilidades SIN variante dark:. */
html.dark .text-primary-600, html.dark .text-primary-700, html.dark .text-primary-800, html.dark .text-primary-900,
html.dark .hover\:text-primary-600:hover { color: #EBC27E; }
html.dark .bg-primary-600 { background-color: #E7B868; color: #1B2E1F; }
html.dark .bg-primary-600.text-white, html.dark .bg-primary-600 .text-white { color: #1B2E1F; }
html.dark .bg-primary-600 .text-primary-100, html.dark .bg-primary-600 .text-primary-100\/90 { color: rgba(27, 46, 31, .72); }
/* Arena con texto verde oscuro (lote reservado del mapa): text-primary-900 ya no pasa a arena */
html.dark .bg-accent-500.text-primary-900 { color: #1B2E1F; }
html.dark .hover\:bg-primary-700:hover { background-color: #D9A956; color: #1B2E1F; }
html.dark .bg-primary-50, html.dark .bg-primary-100 { background-color: rgba(231, 184, 104, .14); }
html.dark .bg-primary-50\/60, html.dark .bg-primary-50\/40, html.dark .bg-primary-600\/10 { background-color: rgba(231, 184, 104, .10); }
html.dark .hover\:bg-primary-50:hover { background-color: rgba(231, 184, 104, .12); }
html.dark .border-primary-200, html.dark .border-primary-300, html.dark .border-primary-400,
html.dark .border-primary-500, html.dark .border-primary-600 { border-color: rgba(231, 184, 104, .55); }
html.dark .ring-primary-600, html.dark .ring-primary-700, html.dark .ring-primary-200 { --tw-ring-color: rgba(231, 184, 104, .6); }
/* Botón principal en claro: el verde vivo de la marca */
html:not(.dark) .bg-primary-600 { background-color: #1B4D33; }
html:not(.dark) .hover\:bg-primary-700:hover { background-color: #123A26; }
/* .j-fila define display: respetar hidden / md:grid */
.j-fila.hidden { display: none; }
@media (min-width: 768px) { .j-fila.md\:grid { display: grid; } }