style: portal IT con estilo grafico de inventario.sam (hero, Work Sans, tarjetas)

src/app/globals.css

@@ -407,3 +407,186 @@ body {
     opacity: 1;
   }
 }
+
+/* ============================================================
+   Portal IT — estilo gráfico inventario.sam
+   (Work Sans, fondo #F2F5F9, degradado #16243D -> #015FC9).
+   Todo va bajo .sam-shell para no tocar el índice público.
+   ============================================================ */
+.sam-shell {
+  --inv-navy: #16243d;
+  --inv-blue: #015fc9;
+  --inv-bg: #f2f5f9;
+  --inv-muted: #6c788b;
+  --inv-line: #edf1f6;
+  font-family: var(--font-work-sans), system-ui, sans-serif;
+  color: var(--inv-navy);
+}
+
+.sam-shell .sam-sidebar {
+  background: linear-gradient(180deg, #16243d 0%, #015fc9 150%);
+}
+
+.sam-shell .home-section {
+  background: var(--inv-bg);
+}
+
+/* Hero superior estilo inventario */
+.sam-shell .sam-toolbar.sam-hero {
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  color: #fff;
+  border: none;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #16243d 0%, #015fc9 100%);
+  box-shadow: 0 0.5rem 1.25rem rgba(22, 36, 61, 0.13);
+}
+
+.sam-shell .sam-hero::after {
+  content: "";
+  position: absolute;
+  width: 240px;
+  height: 240px;
+  right: -75px;
+  bottom: -145px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 50%;
+  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.04),
+    0 0 0 56px rgba(255, 255, 255, 0.03);
+  pointer-events: none;
+}
+
+.sam-shell .sam-hero-main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.sam-shell .sam-hero-icon {
+  display: inline-flex;
+  flex: 0 0 44px;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.14);
+  font-size: 1.45rem;
+}
+
+.sam-shell .sam-eyebrow {
+  display: block;
+  margin-bottom: 0.2rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.sam-shell .sam-hero h5 {
+  color: #fff;
+  font-size: clamp(1.15rem, 2vw, 1.4rem);
+}
+
+.sam-shell .sam-hero-sub {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.82rem;
+}
+
+.sam-shell .sam-hero-side {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.4rem 1rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  font-size: 0.82rem;
+}
+
+.sam-shell .sam-hero-side i {
+  color: #9ed0ff;
+}
+
+/* Tarjetas y separadores estilo inventario */
+.sam-shell .app-card {
+  border: 1px solid rgba(22, 36, 61, 0.09);
+  border-radius: 16px;
+  box-shadow: 0 0.35rem 1rem rgba(22, 36, 61, 0.055);
+}
+
+.sam-shell .app-card:hover {
+  transform: translateY(-2px);
+  background-color: #fff;
+  box-shadow: 0 0.6rem 1.4rem rgba(22, 36, 61, 0.1);
+}
+
+.sam-shell .section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.9rem 1.25rem;
+  border: none;
+  border-radius: 14px;
+  color: #fff;
+  background: linear-gradient(135deg, #16243d 0%, #015fc9 100%);
+  box-shadow: 0 0.35rem 1rem rgba(22, 36, 61, 0.12);
+}
+
+.sam-shell .section-header .badge {
+  margin-left: auto;
+}
+
+.sam-shell .btn-primary {
+  background-color: var(--inv-blue);
+  border-color: var(--inv-blue);
+}
+
+.sam-shell .btn-primary:hover {
+  background-color: #014fa8;
+  border-color: #014fa8;
+}
+
+.sam-shell .btn-outline-primary {
+  color: var(--inv-blue);
+  border-color: var(--inv-blue);
+}
+
+.sam-shell .btn-outline-primary:hover {
+  background-color: var(--inv-blue);
+  border-color: var(--inv-blue);
+  color: #fff;
+}
+
+.sam-shell .table thead th {
+  color: var(--inv-muted);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.sam-shell .text-muted {
+  color: var(--inv-muted) !important;
+}
+
+@media (max-width: 575.98px) {
+  .sam-shell .sam-toolbar.sam-hero {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .sam-shell .sam-hero-side {
+    justify-content: flex-start;
+    margin-top: 0.6rem;
+  }
+}

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Fira_Sans } from "next/font/google";
+import { Fira_Sans, Work_Sans } from "next/font/google";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./globals.css";
 
@@ -9,6 +9,12 @@ const firaSans = Fira_Sans({
   weight: ["400", "500", "600", "700"],
 });
 
+const workSans = Work_Sans({
+  variable: "--font-work-sans",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
 export const metadata: Metadata = {
   title: "SAM | Sistema de Administración de Matrículas",
   description: "SAM - Índice de módulos integrados y tableros por módulo",
@@ -23,7 +29,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="es" className={firaSans.variable}>
+    <html lang="es" className={`${firaSans.variable} ${workSans.variable}`}>
       <head>
         <link
           href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"

src/components/SamShell.tsx

@@ -106,27 +106,35 @@ export default function SamShell({
 
       <section className="home-section">
         <div className="container-fluid">
-          <div className="row sam-toolbar align-items-center py-2 mb-3">
+          <div className="row sam-toolbar sam-hero align-items-center mb-3">
-            <div className="col-md-6">
+            <div className="col-md-7">
-              <h5 className="mb-0 fw-bold">
+              <div className="sam-hero-main">
-                <span style={{ color: "#283583" }}>{brand}</span>
+                <span className="sam-hero-icon">
-                {subtitle && (
+                  <i className="bx bx-layer" />
-                  <small className="text-muted ms-2">{subtitle}</small>
+                </span>
-                )}
+                <div className="min-w-0">
-              </h5>
+                  <span className="sam-eyebrow">Portal IT · SAM</span>
+                  <h5 className="mb-0 fw-bold">{brand}</h5>
+                  {subtitle && <small className="sam-hero-sub">{subtitle}</small>}
+                </div>
+              </div>
             </div>
-            <div className="col-md-6 text-end">
+            <div className="col-md-5 text-end">
-              {topUser && (
+              {(topUser || topSede) && (
-                <span className="me-3">
+                <div className="sam-hero-side">
-                  <i className="bx bx-user me-1" />
+                  {topUser && (
-                  {topUser}
+                    <span>
-                </span>
+                      <i className="bx bx-user me-1" />
-              )}
+                      {topUser}
-              {topSede && (
+                    </span>
-                <span>
+                  )}
-                  <i className="bx bx-home me-1" />
+                  {topSede && (
-                  {topSede}
+                    <span>
-                </span>
+                      <i className="bx bx-home me-1" />
+                      {topSede}
+                    </span>
+                  )}
+                </div>
               )}
             </div>
           </div>