/* ============================================================================
   Sistema Franz Mayer — Tema institucional
   Base: AdminLTE v4 (Bootstrap 5) · Blanco con rojo institucional #C8142F
   ========================================================================== */

:root {
  --mfm-rojo: #C8142F;
  --mfm-rojo-osc: #A10F26;
  --mfm-rojo-claro: #F7E2E5;
  --mfm-gris: #6c757d;

  /* Tipografías institucionales */
  --mfm-font-titulo: 'Space Grotesk', system-ui, sans-serif;
  --mfm-font-texto: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sobrescribe el color primario de Bootstrap por el rojo del museo */
  --bs-primary: #C8142F;
  --bs-primary-rgb: 200, 20, 47;
  --bs-link-color: #A10F26;
  --bs-link-hover-color: #C8142F;
  /* Tipografía de cuerpo en todos los componentes de Bootstrap */
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Fondo general claro + tipografía de cuerpo */
body {
  background-color: #f4f6f9;
  font-family: var(--mfm-font-texto);
}

/* Títulos y elementos de marca en Space Grotesk */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.brand-text, .login-logo, .kpi-num,
.card-header, .navbar-brand {
  font-family: var(--mfm-font-titulo);
  letter-spacing: -0.01em;
}

/* ── Botones primarios en rojo institucional ─────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--mfm-rojo);
  --bs-btn-border-color: var(--mfm-rojo);
  --bs-btn-hover-bg: var(--mfm-rojo-osc);
  --bs-btn-hover-border-color: var(--mfm-rojo-osc);
  --bs-btn-active-bg: var(--mfm-rojo-osc);
  --bs-btn-active-border-color: var(--mfm-rojo-osc);
  --bs-btn-disabled-bg: var(--mfm-rojo);
  --bs-btn-disabled-border-color: var(--mfm-rojo);
}
.btn-outline-primary {
  --bs-btn-color: var(--mfm-rojo);
  --bs-btn-border-color: var(--mfm-rojo);
  --bs-btn-hover-bg: var(--mfm-rojo);
  --bs-btn-hover-border-color: var(--mfm-rojo);
  --bs-btn-active-bg: var(--mfm-rojo);
  --bs-btn-active-border-color: var(--mfm-rojo);
}
.text-primary { color: var(--mfm-rojo) !important; }
.bg-primary   { background-color: var(--mfm-rojo) !important; }
a { color: var(--mfm-rojo-osc); }

/* ── Barra superior: blanca con filo rojo ────────────────────────────────── */
.app-header.navbar {
  background-color: #ffffff !important;
  border-bottom: 3px solid var(--mfm-rojo);
}
.app-header .brand-text { color: var(--mfm-rojo); font-weight: 700; }

/* ── Sidebar: blanco con activo en rojo ──────────────────────────────────── */
.app-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e6e6e6;
}
.app-sidebar .sidebar-brand {
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}
.app-sidebar .brand-text { color: var(--mfm-rojo); font-weight: 700; }
.sidebar-menu .nav-link { color: #34404a; border-radius: 6px; margin: 2px 8px; }
.sidebar-menu .nav-link:hover { background-color: var(--mfm-rojo-claro); color: var(--mfm-rojo-osc); }
.sidebar-menu .nav-link.active {
  background-color: var(--mfm-rojo) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(200,20,47,.35);
}
.sidebar-menu .nav-icon { color: inherit; }

/* ── Tarjetas KPI ────────────────────────────────────────────────────────── */
.kpi-card { border: none; border-left: 4px solid var(--mfm-rojo); }
.kpi-card .kpi-num { font-size: 1.8rem; font-weight: 700; color: #222; }
.kpi-card .kpi-lbl { color: var(--mfm-gris); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

/* ── Login ───────────────────────────────────────────────────────────────── */
/* Fondo: foto del patio del museo que se funde con el blanco del sistema.
   Si la imagen no existe aún, se muestra un degradado suave de respaldo. */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.96) 100%),
    radial-gradient(1100px 640px at 50% 40%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.55) 72%),
    url('../img/login-bg.jpg') center/cover no-repeat,
    linear-gradient(135deg, #ffffff 0%, #fbecee 100%);
  background-attachment: fixed, fixed, fixed, fixed;
}
.login-card { width: 100%; max-width: 410px; border: none; border-top: 5px solid var(--mfm-rojo);
  box-shadow: 0 12px 48px rgba(0,0,0,.18); backdrop-filter: blur(2px); }
.login-logo-img { width: 168px; max-width: 70%; height: auto; }
.login-logo { color: var(--mfm-rojo); font-weight: 800; letter-spacing: .04em; }

/* ── Badges de estatus de requisición ────────────────────────────────────── */
.badge-estatus { font-weight: 600; }

/* Encabezado de tablas */
.table thead th { background-color: #fafafa; border-bottom: 2px solid var(--mfm-rojo); }

/* ── Submenús del sidebar ─────────────────────────────────────────────────── */
.sidebar-menu .sub-menu { list-style: none; padding-left: 0; margin: 0; display: none; }
.sidebar-menu .has-sub.menu-open > .sub-menu { display: block; }
.sidebar-menu .sub-menu .nav-link { padding-left: 2.6rem; font-size: .92rem; }
.sidebar-menu .sub-menu .nav-icon { font-size: .9rem; }
.sidebar-menu .nav-arrow { font-size: .8rem; transition: transform .2s ease; }
.sidebar-menu .has-sub.menu-open > .sub-toggle .nav-arrow { transform: rotate(90deg); }
.sidebar-menu .sub-toggle { cursor: pointer; }

/* ── Hub de Inicio: tarjetas de módulos ───────────────────────────────────── */
.hub-greeting h2 { font-weight: 700; }
.hub-card {
  display: block; text-decoration: none; color: inherit; height: 100%;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 1.25rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hub-card:hover { transform: translateY(-3px); border-color: var(--mfm-rojo);
  box-shadow: 0 10px 28px rgba(200,20,47,.14); color: inherit; }
.hub-icon {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.7rem; background: var(--mfm-rojo-claro); color: var(--mfm-rojo);
}
.hub-card .hub-title { font-family: var(--mfm-font-titulo); font-weight: 600; font-size: 1.1rem; }
.hub-card.is-soon { opacity: .72; cursor: default; background: #fbfbfb; }
.hub-card.is-soon:hover { transform: none; border-color: #e6e6e6; box-shadow: none; }
.hub-card.is-soon .hub-icon { background: #eef0f2; color: #9aa3ab; }
.hub-badge-soon { font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  background: #eef0f2; color: #6c757d; border-radius: 20px; padding: .15rem .6rem; }