/* MSM Soluciones · estética del panel (Filament v4) — alineada con la landing */
:root {
  --msm-azul: #0141C3;
  --msm-senal: #0175F2;
  --msm-turquesa: #1EC78C;
  --msm-verde: #62D80C;
  --msm-verde-txt: #2E7D14;
  --msm-grafito: #0B1116;
  --msm-txt2: #39434A;
  --msm-gris: #6E7A85;
  --msm-linea: #E4E8E7;
  --msm-hueso: #F5F8F7;
  --msm-degradado: linear-gradient(95deg, #0141C3 0%, #0175F2 38%, #1EC78C 72%, #62D80C 100%);
  --msm-puntos: radial-gradient(circle, rgba(1,65,195,.14) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
}

/* ---------- Base y tipografía ---------- */
.fi-body { background: var(--msm-hueso); color: var(--msm-grafito); }
.fi-header-heading, .fi-simple-header-heading, .fi-section-header-heading,
.fi-modal-heading, .fi-wi-stats-overview-stat-value, .fi-ta-header-heading {
  font-family: Nunito, var(--font-family), sans-serif; font-weight: 800; letter-spacing: -0.3px;
}

/* ---------- Botón principal: azul MSM sólido ---------- */
.fi-btn.fi-color-primary { --bg: var(--msm-azul); --text: #fff; --hover-bg: var(--msm-senal); --hover-text: #fff; }
.fi-btn { border-radius: 10px; font-weight: 600; }

/* ---------- Barra superior: blanca como el header de la landing, con la franja de marca ---------- */
.fi-topbar { background: #fff; box-shadow: none; --tw-ring-color: transparent; position: relative; }
.fi-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--msm-degradado); }
.fi-topbar .fi-icon-btn .fi-icon { color: var(--msm-gris); }
.fi-topbar .fi-global-search-field .fi-input-wrp { background: var(--msm-hueso); border-radius: 10px; }

/* ---------- Menú lateral liviano ---------- */
@media (min-width: 1024px) {
  .fi-sidebar { background: #FAFBFB; border-right: 1px solid #E9EDEC; }
}
.fi-sidebar.fi-sidebar-open { background: #FAFBFB; }
.fi-sidebar-nav { padding-top: 1.75rem; }
.fi-sidebar-group-label { color: var(--msm-gris); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.fi-sidebar-item-label { color: var(--msm-txt2); font-weight: 500; }
.fi-sidebar-item-btn > .fi-icon { color: var(--msm-gris); }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background: #EEF2F1; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #E8F0FE; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--msm-azul); font-weight: 700; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--msm-verde);
}

/* ---------- Tarjetas y tablas ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11,17,22,.04), 0 8px 24px rgba(11,17,22,.05);
  --tw-ring-color: var(--msm-linea);
}
.fi-ta-header-cell { background: #FAFBFB; color: var(--msm-gris); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.fi-badge { border-radius: 99px; }
.fi-wi-stats-overview-stat { transition: transform .15s, box-shadow .15s; }
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(1,65,195,.10); }

/* ---------- Bienvenida del escritorio ---------- */
.msm-bienvenida {
  position: relative; overflow: hidden; border-radius: 18px; padding: 28px 32px; color: #fff;
  background: var(--msm-degradado); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.msm-bienvenida::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.18) 1.2px, transparent 1.6px) 0 0 / 22px 22px; pointer-events: none; }
.msm-bienvenida > * { position: relative; }
.msm-bv-fecha { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin: 0; }
.msm-bienvenida h2 { font-family: Nunito, sans-serif; font-weight: 900; font-size: 30px; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.5px; }
.msm-bienvenida p.msm-bv-sub { margin: 0; opacity: .92; }
.msm-bv-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.msm-bv-acciones a { background: #fff; color: var(--msm-azul); font-family: Nunito, sans-serif; font-weight: 800; font-size: 14px; padding: 11px 16px; border-radius: 10px; text-decoration: none; transition: transform .15s; }
.msm-bv-acciones a:hover { transform: translateY(-1px); }
.msm-bv-acciones a.sec { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

/* ---------- Login: textura dinámica (puntos + manchas de color que se mueven lento) ---------- */
.fi-simple-layout { position: relative; overflow: hidden; background: var(--msm-puntos), #fff; }
.fi-simple-layout::before, .fi-simple-layout::after {
  content: ""; position: fixed; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; will-change: transform;
}
.fi-simple-layout::before {
  top: -25vmax; left: -15vmax;
  background: radial-gradient(circle, rgba(1,117,242,.55), rgba(1,65,195,0) 65%);
  animation: msm-flota-a 22s ease-in-out infinite alternate;
}
.fi-simple-layout::after {
  bottom: -28vmax; right: -18vmax;
  background: radial-gradient(circle, rgba(98,216,12,.45), rgba(30,199,140,.25) 40%, rgba(30,199,140,0) 68%);
  animation: msm-flota-b 26s ease-in-out infinite alternate;
}
@keyframes msm-flota-a { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(18vw,12vh) scale(1.15); } 100% { transform: translate(6vw,28vh) scale(.95); } }
@keyframes msm-flota-b { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20vw,-10vh) scale(1.1); } 100% { transform: translate(-8vw,-26vh) scale(1.2); } }
.fi-simple-main-ctn { position: relative; z-index: 1; }
.fi-simple-main { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 50px rgba(11,17,22,.10); --tw-ring-color: var(--msm-linea);
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fi-simple-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--msm-degradado); }
.fi-simple-header .fi-logo { height: 7rem !important; }
.fi-simple-header-subheading { color: var(--msm-gris); }
@media (prefers-reduced-motion: reduce) { .fi-simple-layout::before, .fi-simple-layout::after { animation: none; } }