Usuario vendedor y pestaña descargas

frontend/administrativo/admin.css

@@ -1025,6 +1025,11 @@ select {
   color: #0e7490;
 }
 
+.rol-vendedor {
+  background: linear-gradient(135deg, rgba(252, 211, 77, 0.22) 0%, rgba(251, 146, 60, 0.22) 100%);
+  color: #b45309;
+}
+
 .you-badge {
   display: inline-block;
   margin-left: 6px;
@@ -1194,6 +1199,89 @@ select {
   75%      { transform: translateX(6px); }
 }
 
+/* ════════════════════════════════
+   SUBTABS (vista Descargas)
+   ════════════════════════════════ */
+.subtabs {
+  display: flex;
+  gap: 8px;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  margin-bottom: 18px;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.subtab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 18px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ink-mute);
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.88rem;
+  border-radius: calc(var(--radius-lg) - 6px);
+  cursor: pointer;
+  transition: color .18s ease, background .18s ease, border-color .18s ease;
+  white-space: nowrap;
+}
+
+.subtab:hover:not(.active) {
+  color: var(--ink);
+  background: rgba(255,255,255,0.45);
+}
+
+.subtab.active {
+  background: linear-gradient(135deg, var(--violet), var(--pink));
+  color: #fff;
+  border-color: var(--line-strong);
+  box-shadow: 0 4px 14px -6px rgba(167, 139, 250, 0.55);
+}
+
+.subtab-icon  { font-size: 1rem; line-height: 1; }
+.subtab-label { line-height: 1; }
+
+.subtab-panel { display: none; }
+.subtab-panel.active { display: block; }
+
+.subtab-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 48px 24px;
+  gap: 12px;
+}
+
+.subtab-placeholder-icon {
+  font-size: 3.2rem;
+  line-height: 1;
+  opacity: 0.85;
+  filter: drop-shadow(0 6px 18px rgba(167, 139, 250, 0.35));
+}
+
+.subtab-placeholder h3 {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 1.35rem;
+  font-weight: 400;
+  color: var(--ink);
+}
+
+.subtab-placeholder p {
+  margin: 0;
+  color: var(--ink-mute);
+  max-width: 460px;
+  line-height: 1.55;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
@@ -1202,6 +1290,12 @@ select {
   .mesh-blob { animation: none; }
 }
 
+@media (max-width: 480px) {
+  .subtab { padding: 8px 12px; font-size: 0.82rem; }
+  .subtab-placeholder { padding: 32px 16px; }
+  .subtab-placeholder-icon { font-size: 2.6rem; }
+}
+
 /* ════════════════════════════════
    RESPONSIVE — topbar wrap
    ════════════════════════════════ */