/* =====================================================================
   RDMP · Tema "Glass" (glassmorphism)
   Capa de estilo que se carga DESPUÉS de todas las hojas de módulos.
   No cambia tamaños, rellenos ni alturas: solo superficies, color,
   sombras, bordes y tipografía. Para volver al estilo anterior basta
   con quitar el <link> de este archivo en index.php.
   ===================================================================== */

:root {
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-soft: rgba(255, 255, 255, .38);
  --glass-line: rgba(255, 255, 255, .65);
  --glass-edge: rgba(16, 24, 40, .08);
  --glass-blur: blur(18px) saturate(160%);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 8px 28px rgba(31, 38, 70, .10), 0 1px 3px rgba(31, 38, 70, .06);
  --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 14px 36px rgba(31, 38, 70, .16), 0 2px 6px rgba(31, 38, 70, .08);
  --shadow-lg: 0 24px 64px rgba(20, 24, 45, .28);
  --bg: #EEF1F7;
}

/* ---------- Fondo: malla de color suave y fija ---------- */
body {
  font-family: var(--font);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -.005em;
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(255, 255, 255, .95), transparent 60%),
    radial-gradient(800px 620px at 100% 0%, rgba(148, 158, 178, .22), transparent 60%),
    radial-gradient(900px 700px at 90% 100%, rgba(120, 130, 150, .16), transparent 60%),
    radial-gradient(700px 520px at 20% 95%, rgba(255, 255, 255, .8), transparent 60%),
    linear-gradient(160deg, #F3F4F7 0%, #E6E8ED 100%);
  background-attachment: fixed;
}
h1, h2, h3, .topbar h1, .modal__head h2 { letter-spacing: -.02em; }
code, .code, .grid .code, kbd, .erp-keys code { font-family: var(--font-mono); }

/* ---------- Superficies de vidrio ---------- */
.card, .kpi, .table-wrap, .kcol, .gantt, .filters, .auth-card, .erp-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.kpi { border-top: 4px solid var(--kpi, var(--ink)); }
.kpi:hover { box-shadow: var(--glass-shadow-hover); background: var(--glass-strong); }
.kpi.is-on { background: var(--glass-strong); }
.filters { border-radius: var(--radius); }
.kcol { background: var(--glass-soft); }
.kcard {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 8px rgba(31, 38, 70, .08);
}
.kcard:hover { background: rgba(255, 255, 255, .9); box-shadow: var(--glass-shadow-hover); }

/* Tablas: cabecera translúcida, filas con hover suave */
.grid th { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.grid tbody tr { background: transparent; }
.grid tbody tr:hover { background: rgba(255, 255, 255, .55); }
.mini-list li:hover, .erp-row:hover, .erp-tree summary:hover { background: rgba(255, 255, 255, .5); }

/* ---------- Barra lateral: vidrio oscuro ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(18, 20, 26, .90), rgba(24, 27, 36, .84));
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 8px 0 32px rgba(20, 24, 45, .12);
}
.nav a:hover { background: rgba(255, 255, 255, .08); }
.nav a.is-active {
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.sidebar__foot { border-top-color: rgba(255, 255, 255, .08); }

/* Topbar transparente sobre el fondo */
.topbar { background: transparent; }

/* ---------- Controles ---------- */
input, select, textarea {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(16, 24, 40, .12);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(22, 24, 29, .35);
  box-shadow: 0 0 0 4px rgba(22, 24, 29, .08);
  outline: none;
}
.btn { font-family: var(--font); }
.btn--primary {
  background: linear-gradient(180deg, #E0262A, var(--red));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px rgba(208, 16, 18, .28);
}
.btn--primary:hover { background: linear-gradient(180deg, #D01A1D, var(--red-600)); }
.btn--ghost {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(16, 24, 40, .10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .8); }
.sidebar__foot .btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidebar__foot .btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.seg { background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seg button.is-active { background: rgba(22, 24, 29, .88); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 2px 8px rgba(22, 24, 29, .22); }
.seg button.is-active * { color: inherit; }
.chip, .tag { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- Modales, toast y tooltip ---------- */
.modal {
  background: rgba(255, 255, 255, .80);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-line);
}
.modal::backdrop { background: rgba(22, 24, 29, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__head, .modal__foot { background: transparent; }
.toast { background: rgba(22, 24, 29, .84); }
.toast, .tooltip {
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Login ---------- */
.auth-page {
  background:
    radial-gradient(700px 500px at 15% 15%, rgba(255, 255, 255, .95), transparent 60%),
    radial-gradient(700px 520px at 85% 20%, rgba(148, 158, 178, .24), transparent 60%),
    radial-gradient(800px 600px at 60% 100%, rgba(120, 130, 150, .18), transparent 60%),
    linear-gradient(160deg, #F3F4F7, #E4E6EC);
}
.auth-card { background: rgba(255, 255, 255, .62); border-radius: 16px; }

/* ---------- Scrollbars discretas ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, .22) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .20); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* Si el navegador no soporta backdrop-filter, se usan superficies casi opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .kpi, .table-wrap, .kcol, .gantt, .filters, .auth-card, .erp-card, .modal { background: rgba(255, 255, 255, .94); }
  .sidebar { background: #16181D; }
}