update changes

frontend/src/styles.css

@@ -1,6 +1,6 @@
 /* ============================================================
    App INTRANET — Executive Suite Design System
-   Paleta: Fondo blanco, tarjetas joya sofisticadas
+   Paleta: Fondo blanco, tarjetas joya sofisticadas (Responsive)
    ============================================================ */
 
 /* Fonts: Inter (titulares) + Outfit (cuerpo) */
@@ -10,34 +10,22 @@
 :root {
   /* ── Fondo y superficies (LIGHT MODE) ── */
   --bg-page: #F5F4F1;
-  /* Blanco cálido / ivory */
   --bg-surface: #FFFFFF;
-  /* Superficie limpia */
   --bg-surface-2: #F0EEE9;
-  /* Superficies secundarias */
 
   /* ── Colores joya para tarjetas sofisticadas ── */
   --card-navy: #0D1B2A;
-  /* Azul marino profundo */
   --card-plum: #1A0E2E;
-  /* Ciruela / Violeta oscuro */
   --card-viridian: #0A2520;
-  /* Verde Viridian / Bosque profundo */
   --card-espresso: #1C0E08;
-  /* Espresso / Marrón ébano */
 
   /* ── Acentos elegantes ── */
   --gold-luxe: #C9973C;
-  /* Oro antiguo (visible en blanco) */
   --gold-dark: #A67C28;
   --gold-light: #F0C060;
-  /* Destellos dorados en tarjetas */
   --indigo-rich: #3730A3;
-  /* Índigo profundo */
   --sapphire: #1E3A8A;
-  /* Zafiro */
   --emerald-deep: #065F46;
-  /* Esmeralda profundo */
 
   /* ── Neon (login / accents) ── */
   --neon-blue: #0EA5E9;
@@ -45,11 +33,8 @@
 
   /* ── Textos (dark on white) ── */
   --text-primary: #0F0D0A;
-  /* Negro cálido */
   --text-secondary: #44403C;
-  /* Marrón oscuro */
   --text-muted: #78716C;
-  /* Gris cálido */
   --text-placeholder: #A8A29E;
 
   /* ── Bordes / divisores ── */
@@ -77,11 +62,19 @@
 }
 
 html {
-  font-size: 16px;
+  font-size: 14px;
+  /* Más cómodo para leer en móviles pequeños */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+    /* Retorna al estándar en Tablets y Desktops */
+  }
+}
+
 body {
   margin: 0;
   font-family: 'Outfit', 'Inter', sans-serif;
@@ -101,32 +94,47 @@ h4,
   font-family: 'Inter', 'Outfit', sans-serif;
   font-weight: 900;
   margin: 0;
+  letter-spacing: -0.02em;
+  /* Estética premium */
 }
 
 /* ── Glass Panel (adaptado a fondo blanco) ─────────────── */
 .glass-panel {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
+  border-radius: 12px;
+  /* Menor radio en móvil */
+  box-shadow:
+    0 1px 3px rgba(15, 13, 10, 0.05),
+    0 4px 12px rgba(15, 13, 10, 0.04);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 768px) {
+  .glass-panel {
     border-radius: 16px;
     box-shadow:
       0 1px 3px rgba(15, 13, 10, 0.06),
       0 8px 24px rgba(15, 13, 10, 0.06);
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
 }
 
 .glass-panel-hover:hover {
+  @media (min-width: 1024px) {
+    /* Deshabilitado en móviles / táctil */
     transform: translateY(-2px);
     border-color: var(--border-medium);
     box-shadow:
       0 2px 6px rgba(15, 13, 10, 0.08),
       0 12px 32px rgba(15, 13, 10, 0.10);
+  }
 }
 
 /* ── Tarjetas Joya (Blackjack) ─────────────────────────── */
-/* Clase base compartida — el color de fondo se pasa por variable */
 .card-blackjack {
   position: relative;
-  border-radius: 20px;
+  border-radius: 16px;
+  /* Más compacto en móvil */
   overflow: hidden;
   transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
   cursor: pointer;
@@ -135,42 +143,69 @@ h4,
 .card-blackjack::before {
   content: '';
   position: absolute;
-  inset: 10px;
+  inset: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  /* Borde interno más estrecho en móvil */
-  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 10px;
   pointer-events: none;
-  z-index: 0;
+  z-index: 1;
   transition: border-color 0.2s;
 }
 
-.card-blackjack:hover {
+@media (min-width: 768px) {
+  .card-blackjack {
+    border-radius: 20px;
+  }
+
+  .card-blackjack::before {
+    inset: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 12px;
+  }
+}
+
+/* Efecto hover exclusivo para Desktop */
+@media (min-width: 1024px) {
+  .card-blackjack:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow:
       0 20px 60px rgba(0, 0, 0, 0.35),
       0 0 0 1px rgba(255, 255, 255, 0.08);
-}
+  }
 
-.card-blackjack:hover::before {
+  .card-blackjack:hover::before {
     border-color: rgba(255, 255, 255, 0.22);
+  }
 }
 
 /* ── KPI Cards (light mode) ────────────────────────────── */
 .kpi-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-light);
-  border-radius: 14px;
+  border-radius: 12px;
-  padding: 20px 22px;
+  padding: 16px 18px;
+  /* Menor padding en móvil */
   display: flex;
   flex-direction: column;
   gap: 4px;
-  box-shadow: 0 1px 4px rgba(15, 13, 10, 0.06);
+  box-shadow: 0 1px 4px rgba(15, 13, 10, 0.04);
   transition: all 0.2s;
 }
 
-.kpi-card:hover {
+@media (min-width: 768px) {
+  .kpi-card {
+    border-radius: 14px;
+    padding: 20px 22px;
+    box-shadow: 0 1px 4px rgba(15, 13, 10, 0.06);
+  }
+}
+
+@media (min-width: 1024px) {
+  .kpi-card:hover {
     border-color: var(--border-medium);
     box-shadow: 0 4px 16px rgba(15, 13, 10, 0.10);
     transform: translateY(-1px);
+  }
 }
 
 /* ── Borders ────────────────────────────────────────────── */
@@ -179,7 +214,9 @@ h4,
 }
 
 .neon-border-gold:hover {
+  @media (min-width: 1024px) {
     border-color: var(--gold-luxe);
+  }
 }
 
 .neon-border-blue {
@@ -187,10 +224,11 @@ h4,
 }
 
 .neon-border-blue:hover {
+  @media (min-width: 1024px) {
     border-color: var(--sapphire);
+  }
 }
 
-/* Legacy borders */
 .neon-border-cyan {
   border: 1px solid rgba(14, 165, 233, 0.20);
 }
@@ -225,25 +263,26 @@ h4,
 }
 
 /* ── Inputs ─────────────────────────────────────────────── */
-/* Light mode input */
 .input-luxe {
-  height: 52px;
+  height: 46px;
+  /* Altura más ergonómica en pantallas móviles */
   width: 100%;
-  padding: 0 22px;
+  padding: 0 18px;
   background: var(--bg-surface);
   border: 1px solid var(--border-medium);
   border-radius: 9999px;
   color: var(--text-primary);
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
-  font-weight: 400;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
 }
 
-.input-luxe::placeholder {
+@media (min-width: 768px) {
-  color: var(--text-placeholder);
+  .input-luxe {
+    height: 52px;
+    padding: 0 22px;
+  }
 }
 
 .input-luxe:focus {
@@ -251,11 +290,10 @@ h4,
   box-shadow: 0 0 0 3px rgba(201, 151, 60, 0.12);
 }
 
-/* Dashboard search inputs (light) */
 .input-cyberpunk {
-  height: 44px;
+  height: 40px;
   width: 100%;
-  padding: 0 18px;
+  padding: 0 16px;
   background: var(--bg-surface);
   border: 1px solid var(--border-medium);
   border-radius: 9999px;
@@ -264,11 +302,13 @@ h4,
   font-size: 13px;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
 }
 
-.input-cyberpunk::placeholder {
+@media (min-width: 768px) {
-  color: var(--text-placeholder);
+  .input-cyberpunk {
+    height: 44px;
+    padding: 0 18px;
+  }
 }
 
 .input-cyberpunk:focus {
@@ -276,11 +316,10 @@ h4,
   box-shadow: 0 0 0 3px rgba(201, 151, 60, 0.10);
 }
 
-/* Dark input (for login, dark bg sections) */
 .input-dark {
-  height: 54px;
+  height: 48px;
   width: 100%;
-  padding: 0 25px;
+  padding: 0 20px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 9999px;
@@ -289,28 +328,46 @@ h4,
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
 }
 
-.input-dark::placeholder {
+@media (min-width: 768px) {
-  color: rgba(255, 255, 255, 0.35);
+  .input-dark {
-}
+    height: 54px;
-
+    padding: 0 25px;
-.input-dark:focus {
+  }
-  border-color: rgba(201, 151, 60, 0.55);
-  box-shadow: 0 0 0 3px rgba(201, 151, 60, 0.12);
 }
 
 /* ── Buttons ─────────────────────────────────────────────── */
-/* Gold gradient (primary) */
+.btn-gold,
-.btn-gold {
+.btn-cyan,
+.btn-indigo,
+.btn-ghost,
+.btn-purple {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  height: 48px;
-  padding: 0 28px;
   border-radius: 9999px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
+  width: 100%;
+  /* Botón de bloque por defecto en móviles (más fácil de presionar) */
+}
+
+@media (min-width: 640px) {
+
+  .btn-gold,
+  .btn-cyan,
+  .btn-indigo,
+  .btn-ghost,
+  .btn-purple {
+    width: auto;
+    /* Ancho automático en pantallas de tablets en adelante */
+  }
+}
+
+.btn-gold {
+  height: 44px;
+  padding: 0 24px;
   background: linear-gradient(135deg, #C9973C, #A67C28);
   border: none;
   color: #fff;
@@ -319,24 +376,27 @@ h4,
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(166, 124, 40, 0.20);
-  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+@media (min-width: 768px) {
+  .btn-gold {
+    height: 48px;
+    padding: 0 28px;
     box-shadow: 0 4px 16px rgba(166, 124, 40, 0.30);
+  }
 }
 
 .btn-gold:hover {
+  @media (min-width: 1024px) {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(166, 124, 40, 0.45);
+  }
 }
 
-/* Dark (CTA on dark backgrounds, e.g. login) */
 .btn-cyan {
-  display: inline-flex;
+  height: 44px;
-  align-items: center;
+  padding: 0 20px;
-  justify-content: center;
-  height: 48px;
-  padding: 0 24px;
-  border-radius: 9999px;
   background: linear-gradient(135deg, #C9973C, #A67C28);
   border: none;
   color: #fff;
@@ -345,25 +405,20 @@ h4,
   font-weight: 900;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(201, 151, 60, 0.20);
-  transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: 0 4px 16px rgba(201, 151, 60, 0.30);
 }
 
-.btn-cyan:hover {
+@media (min-width: 768px) {
-  transform: translateY(-2px);
+  .btn-cyan {
-  box-shadow: 0 6px 22px rgba(201, 151, 60, 0.45);
-}
-
-/* Indigo solid */
-.btn-indigo {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
     height: 48px;
     padding: 0 24px;
-  border-radius: 9999px;
+    box-shadow: 0 4px 16px rgba(201, 151, 60, 0.30);
+  }
+}
+
+.btn-indigo {
+  height: 44px;
+  padding: 0 20px;
   background: var(--indigo-rich);
   border: none;
   color: #fff;
@@ -372,48 +427,43 @@ h4,
   font-weight: 800;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(55, 48, 163, 0.20);
-  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+@media (min-width: 768px) {
+  .btn-indigo {
+    height: 48px;
+    padding: 0 24px;
     box-shadow: 0 4px 16px rgba(55, 48, 163, 0.30);
+  }
 }
 
-.btn-indigo:hover {
-  transform: translateY(-2px);
-}
-
-/* Ghost on white */
 .btn-ghost {
-  display: inline-flex;
+  height: 42px;
-  align-items: center;
+  padding: 0 18px;
-  justify-content: center;
-  gap: 8px;
-  height: 46px;
-  padding: 0 22px;
-  border-radius: 9999px;
   background: transparent;
   border: 1.5px solid var(--border-medium);
   color: var(--text-secondary);
   font-family: 'Outfit', sans-serif;
   font-size: 12px;
   font-weight: 600;
-  cursor: pointer;
+}
-  transition: background 0.2s, border-color 0.2s;
+
+@media (min-width: 768px) {
+  .btn-ghost {
+    height: 46px;
+    padding: 0 22px;
+  }
 }
 
 .btn-ghost:hover {
   background: var(--bg-surface-2);
-  border-color: var(--border-medium);
   color: var(--text-primary);
 }
 
-/* Legacy purple */
 .btn-purple {
-  display: inline-flex;
+  height: 40px;
-  align-items: center;
+  padding: 0 18px;
-  justify-content: center;
-  height: 44px;
-  padding: 0 20px;
-  border-radius: 9999px;
   background: var(--indigo-rich);
   border: none;
   color: #fff;
@@ -421,18 +471,27 @@ h4,
   font-size: 11px;
   letter-spacing: 0.10em;
   text-transform: uppercase;
-  cursor: pointer;
-  transition: transform 0.2s;
 }
 
-.btn-purple:hover {
+@media (min-width: 768px) {
-  transform: translateY(-1px);
+  .btn-purple {
+    height: 44px;
+    padding: 0 20px;
+  }
 }
 
 /* ── Scrollbar ─────────────────────────────────────────── */
 ::-webkit-scrollbar {
+  width: 4px;
+  /* Más fino para pantallas móviles */
+  height: 4px;
+}
+
+@media (min-width: 768px) {
+  ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
+  }
 }
 
 ::-webkit-scrollbar-track {
@@ -456,7 +515,8 @@ h4,
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(6px);
+    /* Elevación más sutil en móviles */
   }
 
   to {