/* =====================================================================
   ESTILO — InmoERP
   Capa visual final: tema oscuro casi negro con acentos azul y celeste,
   tema claro limpio con el mismo lenguaje, y menú lateral por grupos
   desplegables. Sólo cambia la apariencia: no toca clases ni estructura.
   Se carga después de theme.css y antes de los colores de Apariencia.
   ===================================================================== */

:root {
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;
  --border: #e5eaf2;
  --border-strong: #d3dae6;
  --text-2: #3f4b5f;
  --muted: #6b7a90;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -4px rgba(30, 64, 175, .06);
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 10px 24px -12px rgba(30, 64, 175, .16);
  --shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .28), 0 6px 14px -6px rgba(15, 23, 42, .08);
  /* Degradado de los elementos destacados: azul hacia celeste */
  --grad: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 50%, var(--secondary, #06b6d4)) 100%);
  --glow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 75%, transparent);
  --card-bg: var(--surface);
  --sidebar-strong: #0f172a;
  --sidebar-muted: #8592a6;
  --sidebar-hover: #f1f5fd;
  --sidebar-border: #e8edf4;
}

/* Modo oscuro: negro profundo, superficies grafito y líneas finas */
:root[data-theme="dark"], :root.auto-dark {
  --bg: #09090b;
  --surface: #131316;
  --surface-2: #17171b;
  --surface-3: #1e1e23;
  --border: #24242a;
  --border-strong: #34343c;
  --text: #f4f4f5;
  --text-2: #d4d4d8;
  --muted: #8e8e9a;
  --muted-bg: #1e1e23;
  --muted-bd: #34343c;
  --topbar: #0b0b0d;
  --card-bg: linear-gradient(180deg, #16161a 0%, #121215 100%);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .03), 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 32px -16px rgba(0, 0, 0, .85);
  --shadow-lg: 0 28px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
  --glow: 0 8px 22px -8px color-mix(in srgb, var(--primary) 85%, transparent);
}

/* ------------------------------ Fondo general ------------------------- */
body:has(> .app) {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 12% -6%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
    radial-gradient(760px 380px at 100% 0%, color-mix(in srgb, var(--secondary, #06b6d4) 6%, transparent), transparent 70%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body:has(> .app) {
  background-image:
    radial-gradient(1000px 460px at 10% -8%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
    radial-gradient(800px 420px at 100% 0%, color-mix(in srgb, var(--secondary, #22d3ee) 8%, transparent), transparent 70%);
}

/* ------------------------------ Menú lateral -------------------------- */
.sidebar { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-border); }
.sidebar .brand { border-bottom: 1px solid var(--sidebar-border); }
.sidebar .brand b { color: var(--sidebar-strong); }
.sidebar .brand small { color: var(--sidebar-muted); opacity: 1; }
.brand .logo { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.sidebar-foot { color: var(--sidebar-muted); opacity: 1; border-top: 1px solid var(--sidebar-border); }

.menu { padding: .7rem .65rem 1.2rem; scrollbar-color: var(--sidebar-border) transparent; }
.menu-group, .menu-group:first-child { margin-top: .15rem; }
.menu-group-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem;
  border: 0; background: transparent; color: var(--sidebar-text); cursor: pointer; text-align: left;
  font: inherit; font-size: .74rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  border-radius: var(--radius-ctl); transition: background .15s, color .15s;
}
.menu-group-btn > i:first-child { font-size: .95rem; width: 18px; text-align: center; color: var(--sidebar-muted); transition: color .15s; }
.menu-group-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-flecha { font-size: .7rem; color: var(--sidebar-muted); transition: transform .22s ease; }
.menu-group.abierto .mg-flecha { transform: rotate(180deg); }
.menu-group-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); }
.menu-group-btn:hover > i:first-child { color: var(--primary); }
.menu-group-btn:focus { outline: none; }
.menu-group-btn:focus-visible { outline: none; background: var(--sidebar-hover); box-shadow: inset 2px 0 0 var(--primary); }
.menu-group.con-activo > .menu-group-btn, .menu-group.con-activo > .menu-group-btn > i:first-child { color: var(--primary); }

/* Despliegue suave: la altura se anima con la rejilla (0fr → 1fr) */
.menu-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.menu-items > div { overflow: hidden; min-height: 0; margin-left: 1.05rem; padding-left: .5rem; border-left: 1px solid var(--sidebar-border); }
.menu-group.abierto > .menu-items { grid-template-rows: 1fr; }
.menu-group.abierto > .menu-items > div { margin-bottom: .35rem; }

.menu a {
  position: relative; display: flex; align-items: center; gap: .6rem; margin: 2px 0; padding: .46rem .7rem;
  border-radius: var(--radius-ctl); color: var(--sidebar-text); font-size: .86rem; font-weight: 500; box-shadow: none;
}
.menu a i { font-size: .98rem; width: 18px; opacity: .85; }
.menu a:hover { background: var(--sidebar-hover); color: var(--sidebar-strong); text-decoration: none; }
.menu a.active { background: var(--grad); color: #fff; font-weight: 600; box-shadow: var(--glow); }
.menu a.active i { opacity: 1; color: #fff; }

/* Buscador de módulos del menú */
.menu-buscar { position: relative; padding: .7rem .75rem .1rem; }
.menu-buscar i { position: absolute; left: 1.45rem; top: calc(50% + .3rem); transform: translateY(-50%); font-size: .8rem; color: var(--sidebar-muted); pointer-events: none; }
.menu-buscar input {
  width: 100%; height: 34px; padding: 0 .75rem 0 2.05rem; border-radius: var(--radius-ctl);
  border: 1px solid var(--sidebar-border); background: var(--sidebar-hover); color: var(--sidebar-strong);
  font: inherit; font-size: .82rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.menu-buscar input::placeholder { color: var(--sidebar-muted); }
.menu-buscar input:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.menu-vacio { margin: .8rem .9rem; font-size: .8rem; color: var(--sidebar-muted); }
:root[data-theme="dark"] .menu-buscar input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }

/* ------------------------------ Barra superior ------------------------ */
.topbar {
  background: color-mix(in srgb, var(--topbar, var(--surface)) 84%, transparent);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.global-search input { background: var(--surface-2); border-color: var(--border); }
.avatar { background: var(--grad); color: #fff; }

/* ------------------------------ Encabezado de página ------------------ */
.page-head h1 .h-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--secondary, #06b6d4) 12%, transparent));
  color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ------------------------------ Tarjetas e indicadores ---------------- */
.card, .kpi { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.kpi { transition: border-color .18s, box-shadow .18s, transform .18s; }
a.kpi:hover, .kpi:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow); }
.kpi .kl { letter-spacing: .06em; }
.kpi .kv { color: var(--text); }
.kpi-activo { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--glow); }
.card-head { border-bottom-color: var(--border); }
.card-foot { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-top-color: var(--border); }

/* ------------------------------ Botones ------------------------------- */
.btn-primary, .btn-primary:focus {
  background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow);
}
.btn-primary:hover { background: var(--grad); border-color: transparent; color: #fff; filter: brightness(1.08); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 90%, transparent); }
.btn-primary:active { filter: brightness(.96); }
.btn-soft { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.btn-soft:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.chip.active, .pager .pages .cur, .plano-tools .btn.active { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
.chip.active .n { background: rgba(255, 255, 255, .22); color: #fff; }
.tabs .active { color: var(--primary); border-bottom-color: var(--primary); }
.progress > span { background: var(--grad); }

/* ------------------------------ Controles ----------------------------- */
.input:focus, .global-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }

/* ------------------------------ Modo oscuro: detalles ----------------- */
:root[data-theme="dark"] .input, :root[data-theme="dark"] select.input, :root[data-theme="dark"] textarea.input,
:root[data-theme="dark"] .global-search input { background-color: #0e0e11; border-color: var(--border-strong); }
:root[data-theme="dark"] .input[readonly], :root[data-theme="dark"] .input:disabled { background-color: #151518; }
:root[data-theme="dark"] .input-group .addon { background: #17171b; }
:root[data-theme="dark"] .table th { background: #111114; color: #9a9aa6; border-bottom-color: var(--border); }
:root[data-theme="dark"] .table td { border-bottom-color: #1f1f24; }
:root[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .025); }
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-wa):not(.btn-soft):not(.btn-ghost):not(.btn-outline-danger) { background: #17171b; border-color: var(--border-strong); color: var(--text-2); }
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-wa):not(.btn-soft):not(.btn-ghost):not(.btn-outline-danger):hover { background: #1f1f24; border-color: #44444d; color: #fff; }
:root[data-theme="dark"] .chip:not(.active) { background: #141417; border-color: var(--border-strong); }
:root[data-theme="dark"] .chip:not(.active):hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border-strong)); }
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px); }
:root[data-theme="dark"] .modal-dialog { background: #131316; border-color: #26262c; }
:root[data-theme="dark"] .dropdown .dd-menu, :root[data-theme="dark"] .search-results { background: #141417; border-color: #2a2a31; }
:root[data-theme="dark"] .kcol { background: #101013; }
:root[data-theme="dark"] .kcard { background: #17171b; }
:root[data-theme="dark"] .toast { background: #18181c; border-color: #2a2a31; }

/* ------------------------------ Apariencia (vista previa) ------------- */
.brand-preview .bp-side { border-right: 1px solid var(--sidebar-border); }
.brand-preview .bp-brand { color: var(--sidebar-strong); }
.brand-preview .bp-logo { background: var(--grad); color: #fff; }
.brand-preview .bp-side a.active { background: var(--grad); color: #fff; }

/* ------------------------------ Portal e inicio de sesión ------------- */
.portal-top { background: linear-gradient(135deg, #0a1530 0%, #1e3a8a 55%, #0e7490 100%); color: #fff; }

/* =====================================================================
   MODO OSCURO · EFECTO VIDRIO
   Superficies semitransparentes sobre un fondo con resplandores azul y
   celeste. El desenfoque real (backdrop-filter) se aplica sólo a piezas
   flotantes: menú lateral, barra superior, menús desplegables y avisos.
   Las tarjetas usan transparencia sin desenfoque para no encerrar los
   elementos de pantalla completa que viven dentro de ellas (mapas).
   ===================================================================== */
:root[data-theme="dark"], :root.auto-dark {
  --glass: rgba(255, 255, 255, .035);
  --glass-2: rgba(255, 255, 255, .018);
  --glass-line: rgba(255, 255, 255, .075);
  --card-bg: linear-gradient(160deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .022) 45%, rgba(255, 255, 255, .012) 100%);
  --border: rgba(255, 255, 255, .075);
  --surface-2: rgba(255, 255, 255, .03);
  --surface-3: rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] body:has(> .app) {
  background-color: #07070a;
  background-image:
    radial-gradient(900px 520px at 8% -6%, rgba(37, 99, 235, .26), transparent 65%),
    radial-gradient(720px 460px at 98% 4%, rgba(6, 182, 212, .16), transparent 65%),
    radial-gradient(900px 600px at 55% 115%, rgba(37, 99, 235, .14), transparent 70%),
    radial-gradient(600px 400px at 0% 85%, rgba(14, 116, 144, .12), transparent 70%);
  background-attachment: fixed;
}

/* Tarjetas, indicadores y paneles: vidrio con borde iluminado arriba */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .kcol, :root[data-theme="dark"] .stat {
  background: var(--card-bg);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -24px rgba(0, 0, 0, .9);
}
:root[data-theme="dark"] .kpi:hover, :root[data-theme="dark"] a.kpi:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--primary) 55%, transparent);
}
:root[data-theme="dark"] .card-head { border-bottom-color: var(--glass-line); }
:root[data-theme="dark"] .card-foot { background: rgba(255, 255, 255, .02); border-top-color: var(--glass-line); }
:root[data-theme="dark"] .kcard { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); }

/* Piezas flotantes con desenfoque real */
:root[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, rgba(14, 14, 18, .72), rgba(10, 10, 13, .62));
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-right-color: var(--glass-line);
}
:root[data-theme="dark"] .topbar {
  background: rgba(9, 9, 12, .55);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--glass-line);
}
:root[data-theme="dark"] .dropdown .dd-menu, :root[data-theme="dark"] .search-results, :root[data-theme="dark"] .toast {
  background: rgba(20, 20, 25, .78);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-color: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] .modal { background: rgba(3, 3, 6, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root[data-theme="dark"] .modal-dialog {
  background: linear-gradient(160deg, rgba(28, 28, 34, .94), rgba(17, 17, 21, .94));
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -24px rgba(0, 0, 0, .9);
}

/* Controles y tablas sobre vidrio */
:root[data-theme="dark"] .input, :root[data-theme="dark"] select.input, :root[data-theme="dark"] textarea.input,
:root[data-theme="dark"] .global-search input { background-color: rgba(0, 0, 0, .32); border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] select.input option { background: #141418; color: #f4f4f5; }
:root[data-theme="dark"] .input:hover { border-color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .table th { background: rgba(255, 255, 255, .03); border-bottom-color: var(--glass-line); }
:root[data-theme="dark"] .table td { border-bottom-color: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .table tfoot td { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-wa):not(.btn-soft):not(.btn-ghost):not(.btn-outline-danger) {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-wa):not(.btn-soft):not(.btn-ghost):not(.btn-outline-danger):hover {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18);
}
:root[data-theme="dark"] .chip:not(.active) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }

/* En celulares el desenfoque grande cuesta batería: se reduce */
@media (max-width: 720px) {
  :root[data-theme="dark"] .sidebar { background: rgba(10, 10, 13, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* Avisos en vidrio: el color del estado queda en el borde, el ícono y un velo suave */
:root[data-theme="dark"] .alert { backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .alert-danger  { background: linear-gradient(90deg, rgba(248, 113, 113, .14), rgba(248, 113, 113, .04)); border-color: rgba(248, 113, 113, .28); }
:root[data-theme="dark"] .alert-warning { background: linear-gradient(90deg, rgba(251, 191, 36, .12), rgba(251, 191, 36, .035)); border-color: rgba(251, 191, 36, .26); }
:root[data-theme="dark"] .alert-info    { background: linear-gradient(90deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .035)); border-color: rgba(56, 189, 248, .26); }
:root[data-theme="dark"] .alert-success { background: linear-gradient(90deg, rgba(52, 211, 153, .12), rgba(52, 211, 153, .035)); border-color: rgba(52, 211, 153, .26); }
:root[data-theme="dark"] .alert-orange  { background: linear-gradient(90deg, rgba(251, 146, 60, .13), rgba(251, 146, 60, .035)); border-color: rgba(251, 146, 60, .27); }
:root[data-theme="dark"] a.alert:hover { filter: brightness(1.15); }
:root[data-theme="dark"] .alert[class*="alert-"] { border-left-color: currentColor; }